js-手写节流和防抖

31 阅读1分钟

1.节流

规定的一个时间,触发一次之后,如果在规定的时间内重复被触发了,只有一次是生效的。

  function throttle(fn, delay) {  
    let flag = true
        return function() {
            if(!flag){
                return;
            }
            let _this = this,
                args = arguments;
            flag = false
            setTimeOut(()=>{
             fn.apply(this,args)
             flag=true
            },delay)
        }
    }

2.防抖

1)函数可以使事件被触发n秒之后再进行处理

  1. n秒内事件再次被触发则重新计时
 function debounce(fn, wait) {
        // 1. 需要一个定时器
        let timer = null;

        return function() {
            let _this = this,
                args = arguments;

            // 3. 中途如果再次触发,则清空重新计时
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }

            // 2. 将定时器设置成指定间隔时间后执行
            timer = setTimeout(() => {
                fn.apply(_this, args);
            }, wait);
        }
    }