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

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

JavaScript

Qyouu 2019-05-12 14:42:42

小菜鳥(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 回答

慕標(biāo)5832272

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

為了達(dá)到讓click處理函數(shù)沒(méi)有結(jié)束前再次觸發(fā)無(wú)效，可以使用jQuery的one方法，即只讓click一次有效。在處理函數(shù)結(jié)束時(shí)，再給body綁定一個(gè)一次有效的處理函數(shù)。functionclickHandler(){$('body').addClass('touchmove');setTimeout(function(){$('body').removeClass('touchmove');$('body').one('click',clickHandler);},5000);}$('body').one('click',clickHandler);

反對(duì) 回復(fù) 2019-05-12

Helenr

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

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