js事件被多次触发时,如何做到只执行最后一次事件函数

昨天遇到一个问题:微信购物车页面的数量增减按钮点击过快时,input里的值会乱跳

  看了源代码后发现,每次点击增减按钮后,整个购物车区域都通过ajax重新写入,而ajax写入是需要时间的,这就导致了点击过快时页面异步加载速度跟不上点击的速度,故此input里面的值会乱跳;

解决方案:

  1、在点击事件外面申明一个变量

    var iTime;

  2、给ajax的触发事件添加时间间隔,

    iTime=setTimeout(fun,250);

  3、每次点击事件触发时都清除之前的setTimeout事件

    clearTimeout();

最后代码如下:

  var iTime;

  element.onclick=function(){

    clearTimeout(iTime);

    iTime=setTimeout(fun,250);

  }

其实上面这个方案所解决的就是事件被多次触发时,只执行最后一次事件,核心思想就是通过设置定时器来控制,通过定时器触发事件,在多次触发事件时清除之前的定时器事件,最后给定时器重新赋值,那么不管怎样都是只会运行最后一次的定时器事件。

原文地址:https://www.cnblogs.com/webwangjie/p/7159632.html