JS 函数节流与防抖

前言

事件的触发权很多时候属于用户，可能会出现下列问题：

• 向后台发送数据，用户频繁触发，对服务器造成压力；
• 一些浏览器事件，如window.onresize，window.mousemove等，触发的频率会非常高，会造成浏览器性能问题。

如果碰到这些问题，那就需要用到函数节流与防抖了。

一、函数节流（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)

function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, interval);
    };
}

运用闭包的特性 -- 可以使变量 lastTime 长期保存着内存中

2.函数节流应用场景

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

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

二、函数防抖（debounce）

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

1.如何实现

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

JS 函数节流与防抖

原文：https://www.cnblogs.com/gaosirs/p/10683246.html