Javascript设置超时和循环[重复]

Question

专家。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';
}

Answer 1

您的问题在于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;
}

http://jsfiddle.net/AQtNY/2/

Answer 2

为什么不直接使用setInterval（）呢？

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

var no = 100;
var myInterval = window.setInterval(function() {
    size(no, no);
    no = no + 50;
    if (no >= 500) clearInterval(myInterval);
}, 2000);

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

Answer 3

你有两个问题：

• 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的回调使用。