setTimeout存在问题

Question

我最近问了一个关于同一个函数的问题,它解决了我的探针问题,并指导我进行tutoraial,因为我使用的是while循环,这意味着我的函数没有动画,只是冻结然后调整大小.这种新方法,使用setTimeout应该有效.唯一的问题是它只是抓住新的尺寸而不是动画.根据萤火虫没有错误.这是我目前管理动画的代码部分.

// Resize in timeframe
// Work out distance
var widthdiff = width - parseInt(element.style.width);
var heightdiff = height - parseInt(element.style.height);

// Work out how miliseconds per step (100 in total)
var steptime = timeframe / 100;

// Work out how many pixels it needs to move each step
var widthpps = widthdiff / 100; // ERROR?
var heightpps = heightdiff / 100;

// Set up original sizes
var origwidth = parseInt(element.style.width);
var origheight = parseInt(element.style.height);

// Loop through all 100 steps setting a time out resize each time
var timers = [];
for(var i = 0; i < 100; i++)
{
    timers[i] = setTimeout(function() { // ERROR?
        element.style.width = origwidth + (widthpps * i) + 'px';
        element.style.height = origheight + (heightpps * i) + 'px';
    }, i * steptime);
}

争论被传递得很好,我已经测试了所有这些,我曾经让它动画一次,只是错了.所以我的问题将接近名为ERROR的评论？我相信.谢谢你的帮助.

Answer 1

问题是变量"i"将由所有超时函数共享.

您可以编写单独的函数来构建超时函数,也可以将函数包装在内:

timers[i] = setTimeout((function(privateEye) {
    return function() { 
      element.style.width = origwidth + (widthpps * privateEye) + 'px';
      element.style.height = origheight + (heightpps * privateEye) + 'px';
    })(i), i * steptime);

当我说"i"将被"共享"时,我的意思是你在循环中构建的每个函数都将正确引用该循环变量.但是那个变量发生了什么？它在循环的每次迭代中都在变化.重要的是要理解函数将引用真正的 "i"变量,而不是冻结副本.通过使用第二个函数,如上所述,您可以复制循环中使用的"i".