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”，他们将被带到网址链接。

我现在要做的是为此添加一个超时功能或重置功能，这样如果用户在5秒内没有执行第二次点击，那么jquery会重新启动或重置自身，就好像第一次点击没有还没发生。

有人可以告诉我怎么做这个吗？

Answer 1

我会做这样的事情......我添加了过多的评论来解释。

如果第二次单击并不总是重新加载页面，则可以设置一个布尔状态变量，当第二次单击并在第一次单击时重置时，该变量将设置为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 2

喜欢这个吗？

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 3

你说过......你需要一个超时机制，基本上，你可以像这样开始超时

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

在您这样做之后，可以通过以下方式取消：

window.clearTimeout(timeoutId);

在您的上下文中，您可以尝试：

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

如果2个函数中的2个未在5秒内执行，则重置jquery？

3 个答案: