函数防抖debounce
ps:单反拍照的时候在你按下拍照的瞬间拍摄了多张照片,然后通过合成比对,生成了一张照片.翻译成JS就是,事件内的N个动作会变忽略,只有事件后`由程序触发`的动作只是有效
实现思路如下,将目标方法(动作)包装在setTimeout里面,然后这个方法是一个事件的回调函数,如果这个回调一直执行,那么这些动作就一直不执行。为什么不执行呢,我们搞了一个clearTimeout,这样setTimeout里的方法就不会执行! 为什么要clearTimeout呢,我们就需要将事件内的连续动作删掉嘛!待到用户不触发这事件了。那么setTimeout就自然会执行这个方法
//input输入框架的格式验证假如只是验证都是字母也罢了,太简单了,不怎么耗性能,如果是验证是否身份证,这性能消耗大,你可以隔170ms才验证一次 function debounce(func, delay) { var timeout; return function(e) { console.log("清除",timeout,e.target.value) clearTimeout(timeout); var context = this, args = arguments console.log("新的",timeout, e.target.value) timeout = setTimeout(function(){ console.log("----") func.apply(context, args); },delay) }; }; var validate = debounce(function(e) { console.log("change", e.target.value, new Date-0) }, 380); // 绑定监听 document.querySelector("input").addEventListener('input', validate);
函数节流throttle
ps:让用户的方法在某个时间段内只执行一次
function throttle(fn, threshhold) { var timeout var start = new Date; var threshhold = threshhold || 160 return function () { var context = this, args = arguments, curr = new Date() - 0 clearTimeout(timeout)//总是干掉事件回调 if(curr - start >= threshhold){ console.log("now", curr, curr - start) fn.apply(context, args) //只执行一部分方法,这些方法是在某个时间段内执行一次 start = curr }else{ //让方法在脱离事件后也能执行一次 timeout = setTimeout(function(){ fn.apply(context, args) }, threshhold); } } } var mousemove = throttle(function(e) { console.log(e.pageX, e.pageY) }); // 绑定监听 document.querySelector("#panel").addEventListener('mousemove', mousemove);