javascript - 为什么 javascript setTimeout 一次完成？

Question

我有这段代码，但我不知道为什么循环中的所有函数都被一次调用！

this.line = function($l) {
    var $this = this;
    $this.$len = 0;
    $('.active').hide(0,function(){             
        $this.$len = $l.length;
        var j = 1;
        $.each($l,function(i,item){
            var t = setTimeout(function(){
                $this._echoLine($l[i]);
                clearTimeout(t);
                if (j >= $this.$len) $('.active').show();
                j++;
            },500*j);
        });
    });
}

Answer 1

这是因为您只在 timeout 函数j 内增加，但延迟（取决于j）仍然1在注册超时处理程序时。

既然你有一个循环索引变量（i），试试这个：

$l.each(function(i, item) {
    setTimeout(function() {
        $this._echoLine($l[i]);
    }, 500 * (i + 1));
});

// a separate timeout to fire after all the other ones
setTimeout(function() {
    $('.active').show();
}, ($l.length + 1) * 500);

不需要clearTimeout线，所以也不需要声明或存储t。

Answer 2

希望它有效。

this.line = function($l) {
    var $this = this;
    $this.$len = 0;
    $('.active').hide(0,function(){             
        $this.$len = $l.length;
        var j = 1;
        $.each($l,function(i,item){
            var t = setTimeout(function(){
                $this._echoLine($l[i]);
                clearTimeout(t);
                if (j >= $this.$len) $('.active').show();
                j++;
            });
        });
    });
}

setTimeout(function() { this.line(); }, 500);