setTimeout 和将变量传递给匿名函数配合使用

10 浏览
0 Comments

setTimeout 和将变量传递给匿名函数配合使用

此问题已有答案:

setTimeout在for循环中不打印连续值[重复]

我正在编写一个代码，我卡在了setTimeout函数上。我想要获得动画效果。用延迟显示数组元素。代码已经完成。

for (var i=0;i <= array.length-1;i++) {
                        (function(el) {
                            setTimeout(function(){
                             document.getElementById('Result').innerHTML += Math.floor(el);
                             console.log(Math.floor(el));
                            }, 3000*(i+1));
                        })(array[i]);

我使用for (var i=array.length-1; i>=0;i--)时遇到了延迟的问题，为什么？（这个代码的想法是从后往前显示数组项）

for (var i=0;i <= array.length-1;i++) {
                        (function(el) {
                            setTimeout(function(){

现在给出与以下代码相同的结果：for (var i=array.length-1; i>=0;i--) {

console.log(array[i]+\'!\')

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

超时函数直到主函数完成后才会执行，这意味着当每次循环执行超时函数时，您的变量i将处于其最终值（在此情况下为0）。此外，您的函数声明也不正确，因为超时函数不会为您传递这些参数。要解决这个问题，您需要将超时函数包装在另一个函数调用中，该函数调用接收当前循环的参数。尝试使用类似于以下内容的方法代替...

for (var i=array.length-1; i>=0;i--) {
  function(array, i) {
    setTimeout(function() {
      document.getElementById('Result').innerHTML += Math.floor(array[i]);
    }, (i+1) * 3000);
  }(array, i);
}

0
0 Comments

这里的问题涉及到的是闭包(closures)。闭包是一种匿名函数，用于记住参数，以便稍后在异步代码中使用它们（例如在由setTimeout调用的函数中）。

如果您编写以下内容：

setTimeout(function(foo){...}(value), 3000)

则在调用setTimeout之前会调用该函数。必须使用闭包来实现此操作：

(function(foo){ 
    setTimeout(function() { 
        ... do something with foo ... 
    }, 3000);
})(value_of_foo);

此代码将记住foo的值，并创建一个使用它的函数的setTimeout。

另一个问题是，您必须增加setTimeout的时间来创建延迟，否则for将创建一堆同时执行的setTimeout(..., 3000)。因此，您需要对您的代码进行如下修改：

for (var i = 0; i <= array.length; i++) {
    (function(el) {
        setTimeout(function(){
            document.getElementById('Result').innerHTML += Math.floor(el)
        }, 3000 * i);
    })(array[i]); 
}

0