【前端知识之JS】节流知识

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍节流的相关知识。

---

一、什么是节流

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直到过了这段时间才重新生效。

二、使用节流的思路

如果定时器为空的话，就执行操作，如果定时器不为空，就不执行。也要使用闭包延长timerOut的作用域。

function thro(func, wait) {
    let timerOut;
    return function () {
        if (!timerOut) {
            timerOut = setTimeout(function () {
                func();
                timerOut = null;
            }, wait)
        }
    }
}
function func(){
    console.log('点击了');
}
document.getElementById('button').onclick = thro(func,5000)

三、节流的应用：图片懒加载

用户划的再快，也要设置一个固定时间来一次一次的加载图片。

四、防抖和节流的区别

1、防抖就是触发事件后n秒后才执行事件处理函数，如果在n秒内又触发了事件，就会重新计时。
2、节流就是连续触发事件，在指定时间间隔内只会执行一次函数，节流会减少函数的执行频率。