jQuery插件中忽略的setTimeout時間間隔

我搜索了一些並且遇到了很多類似的問題，其中有人試圖在jQuery插件中設置超時值，但是我正在努力解答這個問題，這不是一個懶惰的帖子。jQuery插件中忽略的setTimeout時間間隔

我試圖通過調用動畫來延遲隱藏某些內容，例如，如果用戶將鼠標懸停在某個區域上，則會有更多內容進入視圖並隱藏原始內容。然後，當用戶在2秒後移開鼠標時，返回原始內容。

雖然忽略超時，但動畫仍按預期工作。這是我無法控制的！

任何與代碼的協助將一如既往的非常感謝！

下面是簡單的代碼，專注於動畫，但我留在原地插件結構： -

;(function($){ 
$.fn.extend({   
    pluginName: function(options) { 
     // - Settings list and the default values   
     var defaults = { 
      width: this.css('width'), 
     }; 

     var options = $.extend({}, defaults, options); 

     return this.each(function() { 

     // -- Globals 
      var o = options;  
      var timeoutID; 

     function deceptionAnimate(display) { 
      if(display == 1) { 
       obj.clearQueue().animate({ 
             'top': 0, 
             'left': -o.width 
             }, o.interval, o.easing);    
      } else if(display == 0) { 
       obj.clearQueue().animate({ 
             'top': 0, 
             'left': 0 
             }, o.interval, o.easing)     
      } 
     } 

     function delaydeceptionAnimate() { 
      timeoutID = window.setTimeout(deceptionAnimate(0), 2000); 
     } 

     // ---- Initiate 
     function init() { 
         // ----- Animate 

         $(document).on(o.eventTrigger, wrapperID, function() { 
          deceptionAnimate(1); 
         }); 
         $(document).on('mouseout', wrapperID, function() { 
          delaydeceptionAnimate(0); 
         });  
     }  
     // Call 
     init(); 

     }); 
    } 
}); 
})(jQuery);

來源

2013-02-21 KryptoniteDove

window.setTimeout(deceptionAnimate(0), 2000);

您調用deceptionAnimate與參數0，然後通過它的返回值（ null）至setTimeout作爲要被調用的函數。

在這種特殊情況下，你可以重寫deceptionAnimte像這樣：

function deceptionAnimate(display) { 
    if(display) { /* code to show box */ } 
    else { /* code to hide box */ } 
}

然後用這個：

window.setTimeout(deceptionAnimate, 2000);

但在更一般的情況下，將參數傳遞給函數是延遲，使用匿名功能：

window.setTimeout(function() {deceptionAnimate(0);}, 2000);

來源

2013-02-21 15:59:24

就是這樣，如果不清楚，'deceptionAnimate（0）'是一個函數* call *; 'deceptionAnimate'是一個函數*參考*。當計時器滴答出來時，你想給'setTimeout'一個函數來調用，所以你應該給它一個函數引用。 – 2013-02-21 16:08:10

非常感謝，並感謝參考文獻的解釋，這兩方面的確幫助我理解了這裏的問題。我決定以此作爲答案，因爲我在尋找的是一個解決方案，它可以讓我修改欺騙動畫函數來處理延遲。 – KryptoniteDove 2013-02-21 17:28:09

@kolink，我有同樣的問題，請看看http://stackoverflow.com/questions/19178170/settimeout-not-working-with-custom-jquery-plugin – 2013-10-04 09:53:25

你想小心如何喲你寫超時函數調用。在這裏，你實際上調用delayedDeceptionAnimate而不是將它作爲函數屬性傳遞給setTimeout函數。

試着重寫該塊，因爲這：

function delaydeceptionAnimate() { 
    timeoutID = window.setTimeout(function() { 
     deceptionAnimate(0); 
     }, 2000); 
}

這樣，你傳遞一個回調函數，然後調用delayedDeceptionAnimate功能！

來源

2013-02-21 16:06:59 CSilivestru

jQuery插件中忽略的setTimeout時間間隔

回答

相關問題