原生JavaScript实现节流防抖

原生js实现防抖

1. 什么是防抖

• 防抖表示当指定时间内持续触发某个事件时，该事件会进行初始刷新，重新开始计算。

   let btn = document.querySelector('button');
    function write(){
        console.log('已经成功实现防抖');
    }
    const fd = function(fn,deplay){
        let timer;
        return function(){
            const that = this;
            const arg = arguments;
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn.apply(that,arg)
            },deplay)
        }
    }
    btn.addEventListener('click',fd(write ,1000));  

原生js实现节流

1. 什么是节流 ？
   节流当指定时间持续触发某个事件时，该事件只会执行首次触发事件，也就是说指定时间内只会触发一次。

  const btn = document.querySelector('button');
    function write() {
        console.log('这是节流');
    }

    const jl = function (fn, deplay) {
        let timer;
        return function () {
            let content = this;
            let ar = arguments;
            if (timer) {
                return;
            }
            timer = setTimeout(function () {
                fn.apply(content, arguments);
                timer = null;
            }, deplay);
        }
    }
    btn.addEventListener('click', jl(write, 1000));