JavaScript函数节流的两种写法

JavaScript函数节流的概念是指限制事件触发的频率。例如，我们可以设置函数在一定时间内只能触发一次，这可以在处理一些高频事件时提高页面性能。

在JavaScript实现函数节流的时候，一般有两种常用的写法，下面将会分别进行介绍。

时间戳实现

时间戳实现是通过记录上一次执行的时间，和当前时间进行比较，如果时间差大于设定的时间阈值，就执行函数，否则就不执行。下面是一个示例说明：

function throttle(func, wait) {
    let previous = 0;
    return function() {
        let current = Date.now();
        if(current - previous > wait) {
            func.apply(this, arguments);
            previous = current;
        }
    }
}

function handle() {
    console.log('我被执行了');
}

window.addEventListener('resize', throttle(handle, 300));

这段代码通过使用闭包记录了previous变量来记录上一次函数执行的时间，如果当前时间与上一次执行函数的时间差大于wait时长，就执行函数，为了确保this指向正确，调用apply方法并传入this和arguments参数。

定时器实现

定时器实现是表示当高频事件触发时，函数不会立即执行，而是在一定时间后执行，如果在这个时间内再次触发了函数，就会重新计算延迟时间，以达到节流的效果。下面是一个示例说明：

function throttle(func, wait) {
    let timeout;
    return function() {
        if(!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(this, arguments);
            }, wait);
        }
    }
}

function handle() {
    console.log('我被执行了');
}

window.addEventListener('resize', throttle(handle, 300));

这段代码通过将定时器ID保存在timeout变量中，只有当变量为空时才设置定时器，在函数最后清空定时器并执行。如果在等待时间内再次通知触发了throttle函数，就会取消之前创建的定时器，并重新创建一个定时器。

以上是两种JavaScript函数节流的常用实现方法，开发者可以根据实际需求选取不同的方法，以达到更好的节流效果。