jquery 如何添加class 几秒移除再移除这个class？

Question

小菜鸟的问题

我想手机端设置点击屏幕唤醒菜单按钮，几秒后这个菜单自动隐藏，我目前想到的是使用setTimeout()，
在body绑定click点击事件，然后在这个click函数内使用.addClass()给元素天机指定class，几秒后消失就再添加setTimeout()来移除，这么一来会有个问题，就是这个setTimeout()执行会积累，也就是click触发。几次，setTimeout()就会执行几次，也就是多次移除class。

如何在setTimeout()设定的时间内多次click也只执行一次呢？

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

});

Answer 1

为了达到让click处理函数没有结束前再次触发无效，可以使用 jQuery的 one方法，即只让click一次有效。 在处理函数结束时，再给body绑定一个一次有效的处理函数。

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

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

Answer 2

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

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

});