用多个嵌套函数和循环处理回调？

Question

我已经学习了大约一周的javascript语法，对整个异步同步情况一无所知。我创建了一个函数，用于从页面中抓取名称，将这些名称添加到核对表数组中，单独搜索检查表中的每个名称，然后对结果页面中的名称进行擦除，等等，直到找不到更多的名称。有点像一个微型网络爬虫。

不管怎么说，这个背景与问题无关。我的目标是在所有函数和for循环执行到txt文件后添加结果数组。我这样做只是为了让调试过程更容易管理，所以事后发生的事情并不重要。我只是想了解如何以模拟同步处理的方式执行这些函数。我研究了回调、异步/等待函数，并承诺在这个脚本中成功地实现它们。我有很多嵌套函数和for循环，所以我猜我遇到了范围问题。

这个脚本是对我实际上是刮的东西的模仿。然而，实际的脚本是相同的，只是更改了被刮掉的变量名和类名。对于眼前的问题，我相信这不会有什么关系。

const fetch = require('node-fetch');
const cheerio = require('cheerio');

const fruit_names_checklist = []
const fruit_names = [];

fruitsearch = (callback) => {

    // defines url and search term

    const url = "https://www.google.com/search?q=types+of+"
    let fruit_name = "banana"

    // gets html of page

    findfruits(fruit_name);
    function findfruits(thefruit) {
        return fetch(`${url}${thefruit}`)
        .then(response => response.text())
        .then(body => {

            // scrapes fruit names and moves them into fruit_names array

            const $ = cheerio.load(body);
            $('.llgymd').each( (index, element) => {
                const $element = $(element);
                const names = $element.text();
                fruit_names[index] = names;
            });

            /* for loop that adds each fruit name to fruit_names_checklist 
               if it doesn't already doesn't already exist in the checklist */

            for(j = 0; j < fruit_names.length; j++){
                if(!fruit_names_checklist.includes(fruit_names[j])){
                     fruit_names_checklist.push(fruit_names[j]);
                     console.log(fruit_names_checklist);
            }}
 
                /* for loop that goes through each name in the checklist
                   and now searches each name through the same url request. */

                for(let i = 0; i < fruit_names_checklist.length; i++){

                    let fruit_name = fruit_names_checklist[i]
                    findfruits_loop(fruit_name);

                    function findfruits_loop(thefruit) {
                        return fetch(`${url}${thefruit}`)
                        .then(response => response.text())
                        .then(body => {
                            const $ = cheerio.load(body);
                            $('.llgymd').each( (index, element) => {
                                const $element = $(element);
                                const names = $element.text();
                                fruit_names[index] = names;
                            });

                            /* Again adds each fruit name found to fruit_names_checklist 
                               if it doesn't already exist in the checklist */

                            for(j = 0; j < fruit_names.length; j++){
                                if(!fruit_names_checklist.includes(fruit_names[j])){
                                    fruit_names_checklist.push(fruit_names[j]);
                                }
                                console.log(fruit_names_checklist);
                            }
                            // where i've placed the callback
                            callback()
                        });
                    }
                }
            })
        }
    }

    fruitsearch(
    array_to_text = () => {
        // library that converts array to txt file
        const arrayToTxtFile = require('array-to-txt-file')
        const randomValue_6d = Math.floor(Math.random() * 900000)
        arrayToTxtFile(fruit_names_checklist, `backend_modules/debugging/arrays_to_txt/fruit_names_checklist-${randomValue_6d}.txt`, err => {
            if(err) {
                console.error(err)
                return }
                console.log('Array successfully wrote to txt file')});
            })

我控制台记录了成功添加到fruit_names_checklist的for循环中的每个水果名。正如您在下面的console.log列表中看到的，在完成所有循环和函数之后，它成功地创建了一个txt文件，但是它在"i“for循环中被调用。因此，当然为每次迭代创建了一个新的txt文件，这显然是不可取的。

Array(1) ["Plantain"]
Array(2) ["Plantain", "Hardy banana"]
Array(3) ["Plantain", "Hardy banana", "Blue Java banana"]
Array(4) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana"]
Array(5) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata"]
Array(6) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana"]
Array(7) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana"]
Array(8) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina"]
Array(9) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(10) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(11) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(12) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(13) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(14) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(15) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(16) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(17) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(18) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(19) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(20) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(21) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(22) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(23) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(24) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(25) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(26) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(27) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(28) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(29) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(30) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(31) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(32) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(33) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(34) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(35) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(36) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(37) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(38) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(39) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Canceled
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file
Array successfully wrote to txt file

这是在运行所有函数和循环之后最接近创建txt文件的方法，如果在整个“水果搜索”函数末尾使用回调()，则在将任何数据添加到检查表之前创建txt文件。我尝试在这个主函数中的几乎每一个地方进行回调，要么在执行任何函数之前创建txt文件，要么在for循环中创建它。

这是想要的结果

Array(1) ["Plantain"]
Array(2) ["Plantain", "Hardy banana"]
Array(3) ["Plantain", "Hardy banana", "Blue Java banana"]
Array(4) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana"]
Array(5) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata"]
Array(6) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana"]
Array(7) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana"]
Array(8) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina"]
Array(9) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(10) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(11) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(12) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(13) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(14) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(15) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(16) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(17) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(18) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(19) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(20) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(21) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(22) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(23) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(24) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(25) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(26) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(27) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(28) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(29) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(30) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(31) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(32) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(33) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(34) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(35) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(36) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(37) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(38) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Array(39) ["Plantain", "Hardy banana", "Blue Java banana", "Cavendish banana", "Musa acuminata", "Musa balbisiana", "Red banana", "Musa velutina", …]
Canceled
Array successfully wrote to txt file

我无法在许多嵌套函数和许多嵌套的for循环的上下文中使用“回调()”。好像我的范围在某种程度上被切断了。期待看到我在这里做错了什么。

提前感谢

Answer 1

我不知道这是否会有帮助，但面对像你这样的情况，我用这样的柜台。

fruitsearch = (callback) => {
  // defines url and search term

  const url = "https://www.google.com/search?q=types+of+";
  let fruit_name = "banana";

  // gets html of page

  findfruits(fruit_name);
  function findfruits(thefruit) {
    return fetch(`${url}${thefruit}`)
      .then((response) => response.text())
      .then((body) => {
        // scrapes fruit names and moves them into fruit_names array

        const $ = cheerio.load(body);
        $(".llgymd").each((index, element) => {
          const $element = $(element);
          const names = $element.text();
          fruit_names[index] = names;
        });

        /* for loop that adds each fruit name to fruit_names_checklist 
           if it doesn't already doesn't already exist in the checklist */

        for (j = 0; j < fruit_names.length; j++) {
          if (!fruit_names_checklist.includes(fruit_names[j])) {
            fruit_names_checklist.push(fruit_names[j]);
            console.log(fruit_names_checklist);
          }
        }

        /* for loop that goes through each name in the checklist
           and now searches each name through the same url request. */
        let count = fruit_names_checklist.length; // initialize the counter
        for (let i = 0; i < fruit_names_checklist.length; i++) {
          count--; // decrement 
          let fruit_name = fruit_names_checklist[i];
          findfruits_loop(fruit_name);

          function findfruits_loop(thefruit) {
            return fetch(`${url}${thefruit}`)
              .then((response) => response.text())
              .then((body) => {
                const $ = cheerio.load(body);
                $(".llgymd").each((index, element) => {
                  const $element = $(element);
                  const names = $element.text();
                  fruit_names[index] = names;
                });

                /* Again adds each fruit name found to fruit_names_checklist 
                   if it doesn't already exist in the checklist */

                for (j = 0; j < fruit_names.length; j++) {
                  if (!fruit_names_checklist.includes(fruit_names[j])) {
                    fruit_names_checklist.push(fruit_names[j]);
                  }
                  console.log(fruit_names_checklist);
                }
                // where I've placed the callback
                if (count == 0) callback(); // if all iteration are passed write the txt file
              });
          }
        }
      });
  }
};