爲什麼變量在setTimeout封裝時不能通過

Question

如果intervalIsClear爲true，則hoveredItemIndex正在拾取LI元素的索引。

如果intervalIsClear爲false，則hliedItemIndex在setTimeout（）內聲明，但返回-1。爲什麼找不到索引一旦包含在setTimeout（）中？

function() 
       { 
        if (intervalIsClear == true){ 

         hoveredItemIndex = $('.menu li').index(this); 
         changeToHoverText(); 
        } else { 
         hello = setTimeout(function(){ 
          hoveredItemIndex = $('.menu li').index(this); 
          alert (hoveredItemIndex); 
          changeToHoverText(); 
         },500); 
        } 
       } 

Answer 1

這是因爲當該函數執行回調setTimeout時，該方法的執行上下文被改變。這意味着this回調內外setTimeout指向不同的對象。

使用$.proxy手動指定一個回調方法的執行上下文

function() { 
    if (intervalIsClear == true) { 

     hoveredItemIndex = $('.menu li').index(this); 
     changeToHoverText(); 
    } else { 
     hello = setTimeout($.proxy(function() { 
      hoveredItemIndex = $('.menu li').index(this); 
      alert(hoveredItemIndex); 
      changeToHoverText(); 
     }, this), 500); 
    } 
} 

Answer 2

在setTimeout回調this不一樣與外界。

你需要做的事：

   var that = this; 
       hello = setTimeout(function(){ 
        hoveredItemIndex = $('.menu li').index(that); 
        alert (hoveredItemIndex); 
        changeToHoverText(); 
       },500); 

Answer 3

因爲執行上下文中你setTimeout功能發生了變化。在javascript中記住，this關鍵字是函數執行的上下文。在你的情況下，this對象是window對象。

var self = this; 

    if (intervalIsClear == true){ 
     hoveredItemIndex = $('.menu li').index(this); 
     changeToHoverText(); 
    } else { 
     hello = setTimeout(function(){ 
      hoveredItemIndex = $('.menu li').index(self); 
      alert (hoveredItemIndex); 
      changeToHoverText(); 
     },500); 
    } 

所以叫setTimeout()像你上面，你實際上在做這個window.setTimeout()。