鍍金池/ 問答/Linux  HTML/ jquery 如何添加class 幾秒移除再移除這個class？

jquery 如何添加class 幾秒移除再移除這個class？

小菜鳥的問題

我想手機(jī)端設(shè)置點(diǎn)擊屏幕喚醒菜單按鈕，幾秒后這個菜單自動隱藏，我目前想到的是使用setTimeout()，
在body綁定click點(diǎn)擊事件，然后在這個click函數(shù)內(nèi)使用.addClass()給元素天機(jī)指定class，幾秒后消失就再添加setTimeout()來移除，這么一來會有個問題，就是這個setTimeout()執(zhí)行會積累，也就是click觸發(fā)。幾次，setTimeout()就會執(zhí)行幾次，也就是多次移除class。

如何在setTimeout()設(shè)定的時間內(nèi)多次click也只執(zhí)行一次呢？

 $('body').on('click',function(){
    $('body').addClass('touchmove');
    setTimeout(function(){
          $('body').removeClass('touchmove');
     },5000);
      

});
回答
編輯回答
好難瘦

var timer;
$('body').on('click',function(){

clearTimeout(timer);
timer = setTimeout( function(){
    $('body').addClass('touchmove');
    setTimeout(function(){
          $('body').removeClass('touchmove');
     },5000);
} , 200 );

});

2018年5月21日 11:08
編輯回答
葬憶

為了達(dá)到讓click處理函數(shù)沒有結(jié)束前再次觸發(fā)無效，可以使用 jQuery的 one方法，即只讓click一次有效。 在處理函數(shù)結(jié)束時，再給body綁定一個一次有效的處理函數(shù)。

function clickHandler(){
    $('body').addClass('touchmove');
    setTimeout(function(){
          $('body').removeClass('touchmove');
          $('body').one('click', clickHandler);
     }, 5000);
}

$('body').one('click', clickHandler);
2017年1月3日 09:15