Javascript设置超时和循环

专家。 Javascript无法产生所需的延迟效果。
从其他问题中，我了解到，问题在于settimeout和我使用它的方式。 但我仍然无法理解Settimeout是如何工作的。 所以我把代码放在这里。 出于知识目的，只需使用Javascript。
实际上，我正在试图澄清我对javascript中的闭包的概念。 它们是Javascript中扭曲的东西吗

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';
}

---

你有两个问题：

• 调用回调时，

  no

  将具有循环结束的值
• 您正在从循环运行的同一时间开始编程所有超时2000毫秒

以下是您可以解决此问题的方法：

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

的值

---

关于

（函数（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

的回调函数使用。为什么不改用setInterval（）呢

---

您的问题在于size（）函数语法和算法：

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

var no = 100;

var int = window.setInterval(function () {
    size(no,no);
    no += 50;
},2000)

function size(h, w) {
    if (h == 500){
        window.clearInterval(int);
        return;
    }
    var height = h + 'px';
    var width = w + 'px';
    document.getElementsByName('ford').item(0).style.height = height;
    document.getElementsByName('ford').item(0).style.width = width;
}

---

您的while循环工作正常。我已经在chrome控制台上对其进行了测试。@ramin omrani-true？但是图像的大小没有调整，延迟效果为2秒。我知道我弄乱了SetTimeout，但还不知道它的内部工作情况。您好@dystroy-还没有成功。您的代码使浏览器无法响应。@msinfo我的第一个版本是错误的（闭包中没有增加值）。你能试试最后一个吗？是的，它确实起作用了。请你解释一下，while循环的两次迭代，以及在这些条件下t和no变量的值。谢谢（所有这些多次编辑）：-）对编辑表示歉意（流感很难回答）.你还需要详细的解释吗？还是说得很清楚？我现在有了设置超时工作的想法，多亏了@daleyjem。但在函数（不）工作方面需要帮助。我就在那里，但我知道我遗漏了一些东西。他：-）它按你的方式工作。事实上，我写了上面的测试代码来测试我对settimeout和其他事情的了解，在这里我学到了一种方法。一旦有人在我的代码中解释了settimeout发生了什么，我就会将它标记为答案。谢谢。你的代码没有按你想象的方式工作，因为你认为每个settimeout（）从上一个setTimeout（）经过时间后将被调用。但事实并非如此。所有这些setTimeout（）都是“的将立即接到电话。哦！我明白了，我确实在想你的想法。但是，糟糕！因为@dystroy使用settimeout选项给出了解决方案，他编辑了多次他的答案以通知我。我接受他的答案并投票给你。就像dystroy所说的那样……到所有这些settimeout（）的时候。”，则“no”的值将增加到500（这将在代码执行后的几毫秒内发生）。

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

var no = 100;

var int = window.setInterval(function () {
    size(no,no);
    no += 50;
},2000)

function size(h, w) {
    if (h == 500){
        window.clearInterval(int);
        return;
    }
    var height = h + 'px';
    var width = w + 'px';
    document.getElementsByName('ford').item(0).style.height = height;
    document.getElementsByName('ford').item(0).style.width = width;
}