取消/停止超時功能

我有一些javascipt（jQuery），其中我在#myDiv中淡入單擊按鈕後，然後通過使用超時函數5秒後再次淡出它。它工作正常，但如果用戶在我的超時內部的fadeOut函數運行之前再次單擊該按鈕，我需要超時停止並基本重新開始。取消/停止超時功能

我在想，答案是首先運行一個函數來清除超時，但我無法做到這一點。

$('button').on('click', function() { 

    //need function here to stop the timeout if running 

    $("#myDiv").fadeIn(slow); 

    setTimeout(function(){ 
    $("#myDiv").fadeOut(slow); 
    }, 5000); 

});

來源

2016-04-03 scmccarthy22

看看這個帖子找到自己的答案。 http://stackoverflow.com/questions/2578628/how-to-stop-override-a-jquery-timeout-function – theblindprophet

感謝您的鏈接 - 我做了大量的研究，發現不僅僅是這個鏈接處理停止超時，但我不知道如何在將變量存儲到變量後實際運行超時，所以我發佈了這個問題，希望找到一個完整的解決方案，即如何將Timeout存儲爲變量以及如何運行Timeout – scmccarthy22

如果已經設置你必須清除超時：

var to = null; 
$('button').on('click', function() { 

    if(to){ 
    clearTimeout(to); 
    } 
    //need function here to stop the timeout if running 

    $("#myDiv").fadeIn(slow); 

    to = setTimeout(function(){ 
    $("#myDiv").fadeOut(slow); 
    }, 5000); 

});

的clearTimeout()功能刪除超時，所以如果用戶點擊兩次按鈕上的第一超時被刪除，只有第二個實例將被執行。

來源

2016-04-03 19:40:20 conventi

你可以做到這一點使用內置單獨的jQuery API方法：

$('button').on('click', function() { 
    $("#myDiv") 
     .stop(true,true) // resets current animation queue 
     .fadeIn('slow') 
     .delay(5000)// delays anything in queue 
     .fadeOut('slow'); 
});

使事情變得更簡單閱讀

參考文獻：

DEMO

來源

2016-04-03 20:06:17 charlietfl

取消/停止超時功能

回答

相關問題