js防抖与节流

1.防抖与节流在本质上是优化高频率执行代码的一种手段

例如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

2.定义

①节流：n秒内只运行一次，若在n秒内重复触

发，只有一次生效

②防抖：n秒后再执行该事件，若在n秒内被重复触发，则重新计时

3.代码实现

①防抖：

function debounce(fn) {
            return function () {
                if (timerId) clearTimeout(timerId)
                timerId = setTimeout(() => {
                    fn.apply(this, arguments);
                    // timerId = null;
                }, 1000)
            }

        }

②节流：

function throttle(fn) {
            let timer = null;

            return function () {
                if (timer) return;
                timer = setTimeout(() => {
                    fn.apply(this, arguments);
                    timer = null;
                },1000)
            }

总结：

	目的	区别	应用场景
防抖	避免事件被频繁触发	只执行一次	input输入时
节流	减少事件的执行次数	有规律的执行	鼠标事件