javascript - for 循环中的延迟会中断函数

Question

我需要在此 for 循环中创建一个小的延迟:

for (i = 1; i <= cloneIndex; i++) {
                        var myElem = document.getElementById('form' + i);
                        if (myElem != null) {
                            function postData() {
                                return {
                                udd: document.getElementById('udd').value,
                                data: date_in,
                                hora_ini: hour_in,
                                hora_fim: hour_out,
                                cat: $('#form' + i).find('select[id="cat"]').val(),
                                m1: $('#form' + i).find('select[id="q1"]').val(),
                                m2: $('#form' + i).find('select[id="q2"]').val(),
                                m3: $('#form' + i).find('select[id="q3"]').val(),
                                m4: $('#form' + i).find('select[id="q4"]').val(),
                                m5: $('#form' + i).find('select[id="q5"]').val()
                                }
                            }

                            var newItem = postData();
                            $2sxc(@Dnn.Module.ModuleID).webApi.post('app/auto/content/audits', {}, newItem);
                        }
            }

根据 stackoverflow 示例，我尝试了此解决方案:

for (i = 1; i <= cloneIndex; i++) {
                (function(i){
                    setTimeout(function(){
                        var myElem = document.getElementById('form' + i);
                        if (myElem != null) {
                            function postData() {
                                return {
                                udd: document.getElementById('udd').value,
                                data: date_in,
                                hora_ini: hour_in,
                                hora_fim: hour_out,
                                cat: $('#form' + i).find('select[id="cat"]').val(),
                                m1: $('#form' + i).find('select[id="q1"]').val(),
                                m2: $('#form' + i).find('select[id="q2"]').val(),
                                m3: $('#form' + i).find('select[id="q3"]').val(),
                                m4: $('#form' + i).find('select[id="q4"]').val(),
                                m5: $('#form' + i).find('select[id="q5"]').val()
                                }
                            }

                            var newItem = postData();
                            $2sxc(Dnn.Module.ModuleID).webApi.post('app/auto/content/audits', {}, newItem);
                        }
                    }, 1000 * i);
                }(i));
            }

但是这会破坏内部功能。看来 myElem 现在总是为空。 “i”太多？我该如何解决这个问题？

Answer 1

您需要在闭包内定义变量，使其对于每次迭代都是唯一的:

for (var i = 1; i < 10; i++) {
  (function() {
    var k = i; // <-- k will be different for each iteration, because it was declared inside the closure. i was defined outside the closure.
    setTimeout(function() {
      console.log("Delayed: ", i, k)
    }, i * 1000)
  }());
}

...或者在闭包定义中包含 i:

for (var i = 1; i < 10; i++) {
  (function(i) {
    setTimeout(function() {
      console.log("Delayed: ", i)
    }, i * 1000)
  }(i));
}