手撕防抖和节流

126 阅读1分钟

防抖的意思是用户在触发这个事件时候有个时间限制,如果在这段时间再次触发事件,则执行的事件不再执行,并且重置时间,重新计算时间. JS防抖其实也是用来提升网页性能的一种技术写法

防抖就是指当用户触发某个操作时,如果在指定的时间内再次触发该操作,那么就清除前面触发的操作,直到用户操作之后并且在指定的时间内不再操作我们再处理用户的请求

常见的场景:如用户在输入框输入内容,我们根据用户输入内容去查数据。

当用户输入文字时,监听input事件,那么用户每输入一个字符都会触发查询,这样就会发起很多个请求

    debounce(test,1000)
    function debounce(fn,timeout){
        let task = null
        return function(){
           const content = this
           if(task) clearTimeout(task)
           task = setTimeout(()=>{
               fn.apply(this)
           },timeout)
       }

    }

节流的意思就是在规定的时间内只执行这一次操作

    function throttle(fn,timeout){
        let task = null
        return function(){
            const content = this
            !task&& fn.apply(content)
            task = setTimeout(()=>{
                task = null
            },timeout)
        }
    }