4

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

3 回答 3

4

你有两个问题：

  • 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.

关于(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。

于 2013-02-09T20:22:24.570 回答
3

为什么不直接使用 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';
}
于 2013-02-09T20:37:25.870 回答
0

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

于 2013-02-09T20:41:38.180 回答