JS手写面试题 --- 防抖节流

Posted 2021-06-21 lvhanghmm

JS手写面试题 --- 防抖、节流

题目描述:手写防抖节流

实现代码如下:
防抖： 防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行

例如: input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求

// 防抖
    function debounce(fn, delay = 300) {
        // 默认 300毫秒
        let timer;
        return function () {
            const args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args); // 改变 this 指向为调用debounce所指的对象
            }, delay);
        };
    }

    window.addEventListener(
        "scroll", debounce(() => {
            console.log(111);
        }, 1000)
    );

节流： 节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发

例如: 验证码60秒内不可以再次触发(实际开发肯定是使用禁止,但是原理和验证码一样)

// 节流
// 设置一个标志
    function throttled(fn, delay) {
        let flag = true;
        return () => {
            if (!flag) return;
            flag = false;
            timer = setTimeout(() => {
                fn();
                flag = true;
            }, delay);
        };
    }

    window.addEventListener(
        "scroll", throttled(() => {
            console.log(111);
        }, 1000)
    );