js 防抖与节流

节流

解释：

当用户一直通过某个事件触发某一个函数时，由于设置了节流，这个函数会每隔一段时间执行一次

原理：

当给一个函数绑定节流时，实际上是开启了设置了一个定时器timer,初始值为null,当用户第一次触发这个事件时，由于定时器初始值为null，那么就会创建一个定时器，等过了一定的时间间隔后就会执行这个函数，如果还没有达到时间间隔再次触发了事件，则此次函数不执行，直到达到了时间间隔，将定时器设置为null，等下一次触发事件时，判断定时器为null，则会开启定时器，重复此步骤，实现函数节流

时间戳写法：

function throttle(fn,delay){
        // 初次绑定时就设置一个初始值
        let pre = 0
        return function(...args){
            var now = Date.now()
            // 首次肯定可以执行事件，执行完事件就更改pre的值，方便下一次判断
            if(now-pre>delay)
            {
                fn.apply(this,args)
                pre = now
            }
        }
    }

定时器写法：

    function throttle(fn,delay){
        // 初次绑定时就设置了timer定时器，初始值为null
        let timer = null
        return function(...args){
            // 首次执行这个函数时，timer为null，进入if，执行函数
            if(!timer)
            {
                timer = setTimeout(() => {
                    // 这里的this指向和参数都要与前面的事件触发的函数一致
                    fn.apply(this,args)
                    console.log(this);
                    // 当定时器执行完之后将timer设置为null，方便下次函数的执行
                    timer = null
                }, delay);
            }
        }
    }

防抖

解释：

如果用户操作的时间间隔一直小于设置防抖的时间间隔，则只会执行一次

时间戳写法：

function debounce(fn,delay)
    {
        let pre=0
        return function(...args){
            var now = Date.now()
            if(now-pre>delay)
            {
                fn.apply(this,args)
                pre = now
            }
            pre = now
        }
    }

定时器写法：

    function debounce(fn,delay)
    {
        let timer = null
        return function(...args){
            clearInterval(timer)
            timer = setTimeout(() => {
                fn.apply(this,args)
            }, delay);
        }
    }
    document.querySelector('#test').onclick = throttle(add,1000)

时间戳与定时器的区别：时间戳写法，每次用户第一次执行这次事件时马上就执行，而定时器写法由于设置了定时器的时间，会等过了这个时间后再执行第一次的事件