JS节流和防抖

事件的触发权不少时候都属于用户，有些状况下会产生问题：

• 向后台发送数据，用户频繁触发，对服务器形成压力
• 一些浏览器事件:window.onresize、window.mousemove等，触发的频率很是高，会形成浏览器性能问题

若是你碰到这些问题，那就须要用到函数节流和防抖了。

1、函数节流(throttle)

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
有个须要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。

1.如何实现

其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，而后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，若是是，则执行，并更新上次执行的时间戳，如此循环；

html, body { height: 500%; // 让其出现滚动条 }

function throttle(fn, delay) { // 记录上一次函数触发的时间 var lastTime = 0; return function() { // 记录当前函数触发的时间 var nowTime = Date.now(); if (nowTime - lastTime > delay) { // 修正this指向问题 fn.call(this); // 同步时间 lastTime = nowTime; } } } document.onscroll = throttle(function() { console.log('scroll事件被触发了' + Date.now()) }, 200)

上例中用到了闭包的特性--可使变量lastTime的值长期保存在内存中。

2.函数节流的应用场景

须要间隔必定时间触发回调来控制函数调用频率：

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户中止滚动后，才会判断是否到了页面底部；若是是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

 

实现思路

（经常使用版本）

调用函数时，经过上一次pre和如今now两个变量，记录调用时间的频率，prev-now 若是大于约定的时间，才调用函数。调用函数结束后，把pre设置为如今的时间。

 var throttle = function(func, delay) {
            var prev = Date.now();
            return function() {
                var context = this;
                var args = arguments;
                var now = Date.now();
                if (now - prev >= delay) {
                    func.apply(context, args);
                    prev = Date.now();
                }
            }
        }
        function handle() {
            console.log(Math.random());
        }
        window.addEventListener('scroll', throttle(handle, 1000)); 

2、函数防抖(debounce)

防抖函数：一个须要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

1.如何实现

其原理就第一次调用函数，建立一个定时器，在指定的时间间隔以后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另外一个。若是前一个定时器已经执行过了，这个操做就没有任何意义。然而，若是前一个定时器还没有执行，其实就是将其替换为一个新的定时器，而后延迟必定时间再执行。

<button id='btn'>按钮</button> <script type="text/javascript"> function debounce(fn, delay) { // 记录上一次的延时器 var timer = null; return function() { // 清除上一次延时器 clearTimeout(timer) timer = setTimeout(function() { fn.apply(this) }, delay) } } document.getElementById('btn').onclick = debounce(function() { console.log('点击事件被触发' + Date.now()) }, 1000) </script>

上例中也用到了闭包的特性--可使变量timer的值长期保存在内存中。

2.函数防抖的应用场景

对于连续的事件响应咱们只须要执行一次回调：

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

3、总结

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之因此会被频繁触发，大多数状况下是由于 DOM 事件的监听回调，而这也是函数节流以及防抖多数状况下的应用场景。

参考文章

函数节流与函数防抖

JavaScript 函数节流和函数去抖应用场景辨析

函数节流、函数防抖实现原理分析