Question

this.plotted = [jQuery('#img1'), jQuery('#img2'), jQuery('#img3')];

Blah.prototype.animate = function()
{
    if (!this.plotted.length)
        throw 'Blah::animate - No points have been plotted';

    // fix the scope
    var _this = this;

    var animateOn = function(image)
    {
        image.attr('src', _this.options.pointActive);

        setTimeout(function() { animateOff(point); }, 700);
    }

    var animateOff = function(image)
    {
        image.attr('src', _this.options.pointDefault);

        setTimeout(function() { animateOn(point); }, 700);
    }

    for (var i = 0; i < this.plotted.length; i++)
    {
        var point = this.plotted[i];

        setTimeout(function() { animateOn(point); }, 700);
    }
}

我正试图通过在'on'和'off'图像之间切换src来动画这3张图像。我不希望这是'顺序'。即，我不希望看到第一个图像改变，然后是第二个，然后是第三个。

我正在使用setTimeout来完成此任务。好吧，我正试着......

首先，我遇到的问题是setTimeout内的for loop。

for (var i = 0; i < this.plotted.length; i++)
{
    var point = this.plotted[i];

    console.log(point); // this correctly shows each image point

    setTimeout(function()
    {
        console.log(point); // this shows the same, first, point
        animateOn(point);
    }, 700);
}

我不知道内部point与外部point不匹配的内容：/

另外，我想知道这种方法是不是很愚蠢。这些嵌套的函数调用是否会不断构建到堆栈上并最终导致RAM耗尽？有没有更好的方法来解决这个问题？

Answer 1

由于闭包的工作方式，这不起作用。

我会这样做：

var makeAnimateStarter = function(point) {
  return function() {
     animateOn(point);
  };
};

for (var i = 0; i < this.plotted.length; i++)
{
  var point = this.plotted[i];

  setTimeout(makeAnimateStarter(point), 700);
}

从堆栈的角度来看，这不是问题。每次执行超时时，它都在一个新的调用堆栈中。这就是你需要_this的原因。 setTimeout()不会在该点暂停该线程，然后继续执行该函数new。

我的非阻塞Javascript有一些问题

1 个答案: