JavaScript時間事件問題（setTimeout/clearTimeout）

我一直在使用時間事件時遇到問題。有人能解釋爲什麼A不行，B行嗎？唯一的區別在於我把事件綁定在一個函數中。不要擔心功能關閉，它與問題無關。當我測試A時，沒有js錯誤，但計時器未被清除。JavaScript時間事件問題（setTimeout/clearTimeout）

A - >

Test.Navigation = (function() { 

    var openTimer = null; 
    var closeTimer = null; 

    var addListeners = function() { 
     $('.hover_container').on('mousemove', function(e) { 

      clearTimeout(closeTimer); 

     }); 

     $('.hover_container').on('mouseleave', function(e) { 

      // set the close timer 
      var container = this; 
      closeTimer = setTimeout(function() { 
       //has the mouse paused 
       close(container); 
      }, 750); 
     }); 

    }; 

    return { 
     init : function() { 
      addListeners(); 
     } 
    }; 

})();

乙 - >

Test.Navigation = (function() { 

    var openTimer = null; 
    var closeTimer = null; 

    $('.hover_container').on('mousemove', function(e) { 

     clearTimeout(closeTimer); 

    }); 

    $('.hover_container').on('mouseleave', function(e) { 

     // set the close timer 
     var container = this; 
     closeTimer = setTimeout(function() { 
      //has the mouse paused 
      close(container); 
     }, 750); 
    }); 


    var addListeners = function() { 
     // nothing here 
    }; 

    return { 
     init : function() { 
      addListeners(); 
     } 
    }; 

})();

編輯：請忽略容器部分，它沒有任何道瓊斯指數第i個問題簡直是完整的代碼的一部分，我沒有拿出

來源

2012-10-16 Huangism

使用'setTimeout'單個時間實例。使用'setInterval'來保持持續時間。 –

聲明'變種容器=此;'在該容器的直接範圍，而不是在另一功能。在** A **中，容器不是你所需要的。 –

@dystroy容器正是我需要的，這就是問題的旁邊，如果清除定時器工作的關閉功能將不火 – Huangism

在存在調用init的對象之前綁定A.因爲你返回一個新的對象。如果您正在使用，則創建2個對象。 1與變量en綁定。和1的回報。

B正在工作，因爲您創建了一個函數，其中的元素被初始化並使用正確的範圍。 A沒有工作，因爲綁定是在錯誤的範圍，因爲你創建2個對象：

new Test.Navigation(); // Create 1 object 

// Create second object. 
return { 
    init : function() { 
     addListeners(); 
    } 
};

您最好得到這樣的結構，那麼它應該藏漢工作：

Test.Navigation = (function() { 
    // Private vars. Use underscore to make it easy for yourself so they are private. 
    var _openTimer = null, 
     _closeTimer = null; 

    $('.hover_container').on('mousemove', function(e) { 
     clearTimeout(_closeTimer); 
    }); 

    $('.hover_container').on('mouseleave', function(e) { 

     // set the close timer, 
     // use $.proxy so you don't need to create a exta var for the container. 
     _closeTimer = setTimeout(
       $.proxy(function() { 
        //has the mouse paused 
        close(this); 
       }, this) 
      , 750); 

    }); 


    this.addListeners = function() { 
     // nothing here 
    }; 

    this.init = function() { 
     this.addListeners(); 
    } 

    // Always call the init? 
    this.init(); 

    return this; // Return the new object Test.Navigation 
})();

而且使用它像

var nav = new Test.Navigation(); 
nav.init();

而且你可以看到我升級你的代碼位。使用$.proxy，_作爲私人汽車。

來源

2012-10-16 19:37:26 Niels

感謝您對重點問的問題，解釋很好理解 – Huangism

您對this的使用在第一種方法的錯誤範圍內。

嘗試

var openTimer = null; 
var closeTimer = null; 
var self = this;

再後來

var container = self;

在您例如A碼，

$('.hover_container').on('mouseleave', function(e) { 
// set the close timer 
var container = this;

this實際上指的是當前$('.hover_container')元素。

此外，由於setTimeout將在之前的setTimeout完成之前等待重新開始，因此可能會出現差異。您可能需要切換到setInterval，因爲無論前一個回調是否完成，它都會在每個時間間隔設置回撥。

來源

2012-10-16 19:33:46

我讓你用區間的意思，但容器也正是我想用，因爲我想收什麼它，無論如何，如果正確觸發清除綁定，關閉功能甚至不會觸發。此外，容器是塊A和B相同 – Huangism

我的猜測是，在調用代碼，你有一個說法new Test.Navigation()其中，對於B，addListeners被稱爲在（）新Test.Navigation的時間。在A中，你返回一個調用init函數的對象ref。你可以驗證init（）被調用嗎？

I.e.在A中，必須在添加處理程序之前調用init（）。在B中，每次你實例化Test.Navigation時都會添加處理程序---如果你打算一次實例化多個Test.Navigation（），則根據調用代碼，這可能會很糟糕。

來源

2012-10-16 19:37:38 mrk

JavaScript時間事件問題（setTimeout/clearTimeout）

回答

相關問題