私のノンブロッキングJavascriptでいくつかの問題がある

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

私は 'オン'と 'オフ'の画像の間でsrcを切り替えて、これらの3つの画像をアニメートしようとしています。私はこれを「逐次」にしたくありません。つまり、私は最初の画像の変化、次に2番目と3番目の画像の変化を見たくありません。

私はこれを達成するためにsetTimeoutを使用しています。まあ、私はしようとしています...

まず、私が持っている問題は、for loop内のsetTimeoutです。

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()は、その時点でスレッドを一時停止せず、再開すると関数freshを実行しています。