昨天遇到一个问题:微信购物车页面的数量增减按钮点击过快时,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);
}
其实上面这个方案所解决的就是事件被多次触发时,只执行最后一次事件,核心思想就是通过设置定时器来控制,通过定时器触发事件,在多次触发事件时清除之前的定时器事件,最后给定时器重新赋值,那么不管怎样都是只会运行最后一次的定时器事件。