Javascript 递归

Question

我有一个 ajax 调用，我想在完成解析并将结果动画化到页面中后调用它。这就是我陷入困境的地方。

我能记忆起这个功能，但它似乎没有考虑到动画的延迟。即控制台不断以疯狂的速度输出值。

我认为 setInterval 可能有助于将间隔作为我的延迟长度的总和，但我无法让它工作......

function loadEm(){
    var result=new Array();     
    $.getJSON("jsonCall.php",function(results){
        $.each(results, function(i, res){
            rand = (Math.floor(Math.random()*11)*1000)+2000;
            fullRand += rand;
            console.log(fullRand);
            $("tr:first").delay(rand).queue(function(next) {
            doStuff(res);
                next();
            });
        });
        var int=self.setInterval("loadEm()",fullRand);
    });
  }
});

Answer 1

1. 使用setTimeout。 setInterval 将再次调用……一次又一次……

2. 在 loadElm 的顶部(或在 JSON 回调内部)使用 var fullRand。如果没有它，您将在每次调用 loadElm 时递增相同的全局变量。事实上，您应该将 var 与所有 局部变量一起使用——包括此处的 rand。 The Jibbering JavaScript Closure Notes涵盖变量等等。

3. 使用 setTimeout(loadElm, fullRand) -- 不要在第一个参数中使用字符串 :) 请参阅 MDC setTimeout documentation .

4. 检查 JavaScript 错误(将 firebug/IE 开发人员工具/错误控制台放在手边)

5. 而不是使用 setTimeout，考虑记录有多少动画已经完成以及总共有多少动画已经完成!想象一下:

===

// closure in JSON callback. see Jibbering notes.
var count = 0
$.each(results, function(i, res) {
  var rand = (Math.floor(Math.random()*11)*1000)+2000
  count++ // have to do action
  $("tr:first").delay(rand).queue(function(next) {
    ...
    count-- // action done
    if (!count) { // means count == 0 here :-) then...
      loadElm() // ...all actions done
    }
  })
})
if (!count) {
  // err... no animations started :(
}

快乐编码。