重置jquery如果2個函數中的2個沒有在5秒內執行？

Question

我想添加一個超時或重置到這件jQuery。

<script type="text/javascript"> 
    var $msgNav = $('.nav4'); 
$msgNav.on('click', handler); 

function handler() { 
    $('.drop_down_column3').toggle(); 

    handler = function() { //overwrite handler 
     window.location.href = "messages.php"; // 
    } 

    $msgNav.off('click').on('click', handler); 
    return false; 
} 
</script> 

基本上這裏發生了什麼是我實質上是一個導航菜單。如果用戶第一次點擊div'nav4'，則顯示dropbox/drop_down_column3。然後，如果用戶第二次點擊「nav4」，它們將被帶到一個url鏈接。

我想現在要做的是添加一個超時函數或重置函數，以便如果用戶沒有在5秒內執行第二次點擊，那麼jquery會重新開始或重置自己，就好像第一次點擊還沒有發生。

有人可以告訴我我該怎麼做？

Answer 1

是這樣的？

var $msgNav = $('.nav4'), $dropDown = $('.drop_down_column3'); 

$msgNav.one('click', handler); //Register the handler just once 

function handler() { 
    $dropDown.toggle(); 

    $msgNav.one('click', function() { //Set up second click event 
     window.location.href = "messages.php"; 
    }); 

    window.setTimeout(function(){ //Wait for 5 seconds 
     $dropDown.toggle();// Add this if you want to toggle the div again 
     $msgNav.off('click').one('click', handler); //turnoff the handler and reset to old 
    }, 5000) 
    return false; 
} 

Demo

Answer 2

我會這樣做......我添加了過多的評論來解釋。

如果第二次點擊並不總是重裝你可以設置當他們第二次點擊，並在第一次點擊重置被設置爲true的布爾狀態變量的頁面。並用於突破超時功能。

<script type="text/javascript"> 
    var $msgNav = $('.nav4'); 
    var timeoutHandle; 
$msgNav.on('click', handler); 

function handler() { 
    var self=$(this); 
    $('.drop_down_column3').toggle(); 
    //clear the timeout handle if it exists. 
    // On show this gets ready for the next one if there is overlap 
    // on hide it just gets rid of the timer 
    if(timeoutHandle) clearTimeout(timeoutHandle); 
    //if the menu is visible start the timer 
    if($('.drop_down_column3').is(':visible'){ 
     timeoutHandle = setTimeout(function(){ 
      //re-toggle after the time period 
      // no need to check for second click 
      // because the second click leave the page anyways 
      self.trigger('click'); 
     },5000); 
    } 
    handler = function() { //overwrite handler 
     window.location.href = "messages.php"; // 
    } 

    $msgNav.off('click').on('click', handler); 
    return false; 
} 
</script> 

Answer 3

你說......你需要超時機制，basicaly，你可以這樣開始

var timeoutId = window.setTimeout(handler, milis); 

超時時間，並且你做到這一點後，就可以被取消：

window.clearTimeout(timeoutId); 

在你的小說中xt的你可以試試這個：

var $msgNav = $('.nav4'); 
$msgNav.on('click', timedHandler); 


var timeoutId; 

function timedHandler(event) { 
    if(timeoutId) { 
    clickHandler(); 
    } else { 
    waitingHandler(); 
    timeoutId = window.setTimeout(revertFirstClick, 5000); 
    } 
} 

function clickHandler(){ 
    $msgNav.text('Clicked two times in 5 seconds!'); 

    $msgNav.off('click', timedHandler); 
    cancelTimer(); 
} 

function waitingHandler(){ 
    $msgNav.text('Quick! click me again before is too late!'); 
} 

function revertFirstClick(){ 
    $msgNav.text('Click me!'); 

    cancelTimer(); 
} 

function cancelTimer(){ 
    window.clearTimeout(timeoutId); 
    timeoutId = null ; 
} 

看到它在這裏的行動：http://jsbin.com/EtedIgiS/5/edit