59

我有以下代码：

for(var i = 0; i < list.length; i++){
    mc_cli.get(list[i], function(err, response) {
        do_something(i);
    });
}

mc_cli是与 memcached 数据库的连接。可以想象，回调函数是异步的，因此它可能会在 for 循环结束时执行。此外，当以这种方式调用时，do_something(i)它总是使用 for 循环的最后一个值。

我尝试以这种方式关闭

do_something((function(x){return x})(i))

但显然这又总是使用 for 循环索引的最后一个值。

我还尝试在 for 循环之前声明一个函数，如下所示：

var create_closure = function(i) {
    return function() {
        return i;
    }
}

然后打电话

do_something(create_closure(i)())

但同样没有成功，返回值始终是 for 循环的最后一个值。

谁能告诉我我在关闭时做错了什么？我以为我理解他们，但我不明白为什么这不起作用。

4

10 回答 10

81

由于您正在运行一个数组，您可以简单地使用forEachwhich 提供列表项和回调中的索引。迭代将有自己的范围。

list.forEach(function(listItem, index){
  mc_cli.get(listItem, function(err, response) {
    do_something(index);
  });
});
于 2012-11-12T12:02:31.963 回答
46

这是循环内的异步函数范例，我通常使用立即调用的匿名函数来处理它。这可确保使用索引变量的正确值调用异步函数。

好，太棒了。至此所有异步函数都已启动，循环退出。现在，由于它们的异步性质，或者它们将按什么顺序完成，这些函数何时完成尚无定论。如果你的代码需要等到所有这些函数都完成后再执行，我建议你简单地计算一下有多少函数已经完成：

var total = parsed_result.list.length;
var count = 0;

for(var i = 0; i < total; i++){
    (function(foo){
        mc_cli.get(parsed_result.list[foo], function(err, response) {
            do_something(foo);
            count++;
            if (count > total - 1) done();
        });
    }(i));
}

// You can guarantee that this function will not be called until ALL of the
// asynchronous functions have completed.
function done() {
    console.log('All data has been loaded :).');
}
于 2014-10-31T16:44:03.803 回答
17

我知道这是一个旧线程，但无论如何添加我的答案。ES2015let具有在每次迭代时重新绑定循环变量的特性，所以它在异步回调中保持循环变量的值，所以你可以试试下面的一个： 

for(let i = 0; i < list.length; i++){
    mc_cli.get(list[i], function(err, response) {
        do_something(i);
    });
}

但无论如何，最好forEach使用立即调用函数或创建一个闭包，因为这let是 ES2015 的特性，并且可能不支持所有浏览器和实现。从这里Bindings ->let->for/for-in loop iteration scope我可以看到它直到Edge 13甚至Firefox 49才被支持（我还没有检查这些浏览器）。它甚至说 Node 4 不支持它，但我亲自测试过，它似乎是受支持的。

于 2016-07-23T14:23:47.100 回答
14

你已经很接近了，但你应该将闭包传递给get而不是把它放在回调中：

function createCallback(i) {
    return function(){
        do_something(i);
    }
}


for(var i = 0; i < list.length; i++){
    mc_cli.get(list[i], createCallback(i));
}
于 2012-11-12T12:07:55.337 回答
5

试试这个，使用async/await语法和Promise

(async function() {
    for(var i = 0; i < list.length; i++){
        await new Promise(next => {
            mc_cli.get(list[i], function(err, response) {
                do_something(i); next()
            })
        })
    }
})()

这将在每个循环中停止循环，直到next()函数被触发

于 2018-01-24T07:05:57.930 回答
2

ES2017：您可以将异步代码包装在一个函数中（比如 XHRPost），返回一个承诺（承诺中的异步代码）。

然后在 for 循环中调用函数（XHRPost），但使用神奇的 Await 关键字。:)

let http = new XMLHttpRequest();
let url = 'http://sumersin/forum.social.json';

function XHRpost(i) {
    return new Promise(function(resolve) {
        let params = 'id=nobot&%3Aoperation=social%3AcreateForumPost&subject=Demo' + i + '&message=Here%20is%20the%20Demo&_charset_=UTF-8';
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function() {
                console.log("Done " + i + "<<<<>>>>>" + http.readyState);
                if(http.readyState == 4){
                    console.log('SUCCESS :',i);
                    resolve();
                }
        }
        http.send(params);       
   });
}

for (let i = 1; i < 5; i++) {
    await XHRpost(i);
   }
于 2018-07-17T14:51:05.813 回答
0

如果您想在循环中运行异步函数，但仍想在执行回调后保留索引或其他变量，您可以将代码包装在 IIFE（立即调用函数表达式）中。

var arr = ['Hello', 'World', 'Javascript', 'Async', ':)'];
for( var i = 0; i < arr.length; i++) {
  (function(index){
    setTimeout(function(){
       console.log(arr[index]);
 }, 500);
于 2018-01-23T14:02:28.007 回答
0 
(async function() {
  for(var i = 1; i < category.length; i++){

   let result = await $.ajax({
        url: '{{ route('admin.loyalty-commission.sub-category') }}', // Url of the Route
        
        data: {id:category[i-1], cat_state:i, next_cat:category[i]},
        success: function (data) {
            console.log('ajax success previous category id' + category[i-1]);

            // Check if the logic was successful or not
            if (data.status == 'success') {
                
                $(data.subcategories).appendTo(sub_category); //ajax result append to sub_category
            } else {
                console.log(data.msg);
            }
        },
        error: function (data) {
            // Error while calling the controller (HTTP Response Code different as 200 OK
            console.log('Error:', data);
            success = false;
        }
    });
 }
})()
于 2020-07-21T08:06:03.977 回答
-1

这是我的应用程序中的示例代码。它可能有助于解决问题。我在地图循环中使用了异步/等待。多个承诺在一个数组中解决。

这帮助我解决了这个问题 JavaScript async and await in loops

 const refObjId= ['Account', 'Contact', 'Group'];

 const readdirPro = file => {
   return new Promise((resolve, reject) => {
    fs.readdir(file, (err, data) => {
      if (err) reject('I could not find the file');
      resolve(data);
    });
  });
};

const fileNamePromises = refObjId.map(async el => {
    const fileName = await readdirPro(`${__dirname}/../csv-files/${el}/data`);
    return fileName;
  });

//fileNamePromises is an array of promises


  const fileArr = await Promise.all(fileNamePromises);
    console.log(fileArr);
于 2021-01-04T10:16:44.127 回答
-2

使用 ES6 (typescript) 你可以使用asyncand的好处await：

let list: number[] = [1, 2, 3, 4, 5];

// this is async fucntion
function do_something(counter: number): Promise<number> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('called after ' + counter + ' seconds');
            resolve(counter);
        }, counter * 1000);
    })
}
async function foo() {
    // itrate over list and wait for when everything is finished
    let data = await Promise.all(list.map(async i => await do_something(i)));

    console.log(data);
}

foo();
于 2018-05-11T11:59:53.173 回答