防抖与节流

1.原理 函数防抖：当持续触发事件时，一定时间内没有再触发事件，事件处理才会执行一次，如果设定时间的到来之前，又触发了事件，就重新开始延时

2.函数节流：当持续触发事件时，保证一定时间内只调用一次事件处理函数

防抖与节流的应用场景

防抖节流search搜索，用户在不断输入值时，用防抖来节约请求资源鼠标不断点击触发，mousedown（单位时间只触发一次）window触发resize的时候，不断调整浏览器窗口大小会不断触发这个事件，用防抖让其只触发一次监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断防止重复提交

3.防抖代码实现

<div id="container"> </div> <script type="text/javascript"> var count = 1; var container = document.getElementById('container'); function getUserAction(){ this.innerHTML = count++; } container.onmousemove = debounce(getUserAction, 1000); // 控制getUserAction 方法在合适的时机执行! function debounce(fn, wait){ var timeout; return function(){ clearTimeout(timeout); timeout = setTimeout(fn.bind(this), wait); } } </script>

4.节流代码实现

<script type="text/javascript"> var count = 1; var container = document.getElementById('container'); function getUserAction(){ this.innerHTML = count++; } container.onmousemove = throttle(getUserAction, 1000, true); function throttle(fn, wait){ var previous = 0; //参照物 return function(){ var now = + new Date();//获取1970年1月1号到现在的毫秒数 if(now - previous > wait){ fn.apply(this); previous = now } } } </script>

5.小结 防抖和节流都是为了避免重复执行函数，防抖是只执行一次，节流是每周期执行一次。节流：定时器或者时间戳实现。