Javascript SetTimeout和循环

一尘不染

Javascript SetTimeout和循环

javascript

专家。JavaScript无法产生所需的延迟效果。
从其他问题上，我因此知道，问题在于settimeout及其使用方式。但是我仍然无法理解Settimeout的工作原理。所以我将代码放在这里。由于知识目的，仅需使用Javascript。
实际上，我正在尝试清除有关此的概念，即javascript中的闭包。它们是Java的扭曲事物吗？

var objImg = new Object();
var h;
var w;

var no = 100;
while (no != 500) {
    setTimeout(function () {
        size(no, no);
    }, 2000);

    /* it's get executed once, instead of repeating with while loop
    Does it leave loop in mid? I get image with 500px height and
    width, but effect is not acheived.
    */

    no = no + 50;
}

function size(h, w) {
    var objImg = document.getElementsByName('ford').item(0);
    objImg.style.height = h + 'px';
    objImg.style.width = w + 'px';
}

阅读 279

2020-05-01

共1个答案

一尘不染

您有两个问题：

no 调用回调时将具有循环结束的值
您将循环运行的同一时间的所有超时编程为2000 ms。

解决方法如下：

var t = 0
while (no != 500) {
   (function(no) {
      t += 2000;
      setTimeout(function() { size(no,no);} ,t);
   })(no);
   no  = no+50; // could be written no += 50
}

立即执行的函数将创建一个范围，以保护的值no。

关于以下内容的一些解释(function(no) {：

变量的范围是

全球范围
一个功能

上面的代码可能被编写为

var t = 0
while (no != 500) {
   (function(no2) {
      t += 2000;
      setTimeout(function() { size(no2,no2);} ,t);
   })(no);
   no += 50;
}

在这里，可能更清楚我们有两个变量：

no，其值随每次迭代而变化，并且在调用超时时为500
no2，实际上no2是内部匿名函数每次调用一个变量

每次调用内部匿名函数时，它都会声明一个新no2变量，其值no在调用时（在迭代过程中）。no2因此，此变量受到保护，并由给的回调使用setTimeout。

2020-05-01