2010-05-11 145 views
0

我試圖做一個jQuery插件,執行定時器上的方法。我希望它能獨立處理頁面上的多個元素。我已經達到了定時器爲每個元素執行的一點,但setTimeout中調用的方法似乎只知道插件的最後一個實例。對象和setTimeout的Javascript範圍問題

我知道我在這裏做了一些根本上愚蠢的事情,但是如果我知道什麼的話,我就會死。我知道這樣的東西在這裏被問過800萬次,但我沒有找到與我的具體問題有關的答案。

下面是一個腳本,演示了我正在做的事情的結構。

<html> 
<head> 
<script type="text/javascript" src="assets/jquery.min.js"></script> 
<script type="text/javascript"> 
var crap = 0; 
(function($) 
{ 
    jQuery.fn.pants = function(options) { 
     var trousers = { 
      id: null, 
      current: 0, 
      waitTimeMs: 1000, 

      begin: function() { 
       var d = new Date(); 
       this.id = crap++; 
       console.log(this.id); 
       // do a bunch of stuff 
       window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs); 
      }, 

      next: function() { 
       this.current ++; 
       console.log(this.id); 
       window.setTimeout(function(self) {return function() {self.next();}}(this), this.waitTimeMs); 
      }, 
     }; 

     options = options || {}; 
     $.extend(trousers, options); 

     this.each(function(index, element) { 
      trousers.begin(); 
     }); 

     return this; 
    }; 
} 
)(jQuery); 
jQuery(document).ready(function() { 
    jQuery("div.wahey").pants(); 
}); 
</script> 
</head> 
<body> 
<div class="wahey"></div> 
<div class="wahey"></div> 
</body> 
</html> 

輸出我得到的是這樣的:

0 
1 
1 
1 
1 
1 

我希望得到的輸出是這樣的:

0 
1 
0 
1 
0 
1 

回答

0

這可能是你使用「這個」,這是瀏覽器的具體情況並不總是point to what you want it to point to。這屬於函數的所有者,而不是函數的對象。

+0

我能做些什麼來解決它? – Shabbyrobe 2010-05-11 14:01:28

+0

使用範圍特定變量而不是此。在http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/附近看看它談到的「臭名昭着的循環問題」 – Malfist 2010-05-11 14:07:51