返回意外號碼

Question

這是控制我角色的代碼。 「控制」是按鈕類的名稱。我使用for循環來聲明添加觸摸事件偵聽器。我可以在接觸時改變顏色。索引0上的元素用於左轉，索引1上的元素用於跳轉。

問題： 當我用控制檯登錄觸摸事件函數檢查i變量的數量時，它的返回值爲15.我只有4個元素。 15我的案件不匹配。

我的問題是我如何返回15？

var getControl = { 
    buts : document.getElementsByClassName("control"), 

    build : function(world){ 
     for(i = 0; i < 4; i++){ 

      this.buts[i].addEventListener("touchstart",function(e){ 
       console.log(getControl.temp); 
       e.preventDefault(); 
       this.style.backgroundColor = "green"; 
       console.log(i); 
       switch(i){ 
        case 0: 
         misc[0].left(); 
         console.log("left"); 
         break; 
        case 1: 
         misc[0].jump(); 
         break; 
        case 2: 
         misc[0].right(); 
         break; 
        case 3: 

         break; 
       }; 
      },false); 
      this.buts[i].addEventListener("touchend",function(e){ 
       e.preventDefault(); 
       this.style.backgroundColor = "red"; 
      },false); 
      this.buts[i].addEventListener("touchleave",function(e){ 
       e.preventDefault(); 
       this.style.backgroundColor = "red"; 
      },false); 

Answer 1

1. 首先for(i = 0; i < 4; i++)將宣佈i爲全局變量，所以（假設你正在做的是在所有的循環您代碼）i將具有從上次執行的for循環獲得的值。

你應該做的，對於所有在這個代碼和今後的的for循環，是申報這樣的指數i（或j或...）：

for(var i = 0; i < 4; i++) { 

for循環將在整個迭代中具有相同的範圍，因此閉包將會混亂。因爲所有的事件監聽器都會得到相同的i的引用，所以當他們會被調用時，他們會嘗試看看i有什麼值（即使你糾正了問題1.,i也不會有你期望的值，因爲它會在引用它被傳遞給事件監聽器後被改變。通過不斷遞增它來改變它）。你需要的是一種爲數組中的每個項目創建唯一範圍的機制。您可以試試solution，或者使用for的替代方法，如forEach（與鏈接中的解決方案或多或少相似）。

所以這個：

for(i = 0; i < 4; i++) { 
    this.buts[i].addEventListener("touchstart", function(e) { 
     // ... 

應該由這個來代替：

// since buts is an array-like object we can't use forEach directly but we could call it like this 
Array.prototype.forEach.call(this.buts, function(but, i) { 
    but.addEventListener("touchstart", function(e) { 
     // you can use i here and it will work 
    }); 
    // ... 
    // but is equivalent to this.buts[i] 
}); 

Answer 2

在你的循環中，您有

i=0 

此聲明我作爲一個全局變量，所以它可能正在增加或指派其他地方。全局命名空間是危險的。

嘗試使一個變量在你的函數的範圍是這樣的：

var i = 0