首頁(yè) 猿問(wèn) jquery 如何添加class...

jquery 如何添加class 幾秒移除再移除這個(gè)class？

JavaScript

慕虎7371278 2018-07-22 11:20:08

小菜鳥(niǎo)的問(wèn)題我想手機(jī)端設(shè)置點(diǎn)擊屏幕喚醒菜單按鈕，幾秒后這個(gè)菜單自動(dòng)隱藏，我目前想到的是使用setTimeout()，在body綁定click點(diǎn)擊事件，然后在這個(gè)click函數(shù)內(nèi)使用.addClass()給元素天機(jī)指定class，幾秒后消失就再添加setTimeout()來(lái)移除，這么一來(lái)會(huì)有個(gè)問(wèn)題，就是這個(gè)setTimeout()執(zhí)行會(huì)積累，也就是click觸發(fā)。幾次，setTimeout()就會(huì)執(zhí)行幾次，也就是多次移除class。如何在setTimeout()設(shè)定的時(shí)間內(nèi)多次click也只執(zhí)行一次呢？ $('body').on('click',function(){ $('body').addClass('touchmove'); setTimeout(function(){ $('body').removeClass('touchmove'); },5000); });

查看完整描述

2 回答

阿波羅的戰(zhàn)車

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

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

$('body').one('click', clickHandler);

反對(duì) 回復(fù) 2018-07-29

瀟湘沐

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

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

});

反對(duì) 回復(fù) 2018-07-29