美文网首页前端大杂烩
Js中防抖和节流的区别,论如何避免重复点击

Js中防抖和节流的区别,论如何避免重复点击

作者: 写写而已 | 来源:发表于2019-12-06 22:14 被阅读0次

    在进行窗口的resize、scroll,输入框内容校验,防止按钮重复点击等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,体验糟糕。所以可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。
    我们一起先来看看防抖和节流的区别

    名称 相同点 区别
    防抖 都是防止函数多次被调用 重复调用时,只有最后的一次会执行
    节流 重复操作时,间隔一定的时间才调用

    防抖函数 debounce

    // 防抖
    function debounce(fn, wait = 20) {
        let timeout = null
            return function() {
                if (timeout !== null) {
                    clearTimeout(timeout)
                }
            timeout = setTimeout(fn, wait)
        }
    }
    

    节流函数 throttle

    // 节流
    function throttle(fn, delay = 20) {
        let last = Date.now()
        return function() {
            let now = Date.now()
            if (now - last > delay) {
                fn()
                last = now
            }
        }
    }
    

    如何调用

    function handle() {
        console.log('你点我了,在这里执行你想要执行的操作!')
    }
    // 防抖调用方式
    document.querySelector('button').onclick = debounce(handle, 300)
    // 节流调用方式
    document.querySelector('button').onclick = throttle(handle, 300)
    

    防抖和节流都利用了闭包,首先就调用了debounce和debounce方法,把内部的方法返回出去,下次自己执行,以后有时间我再写一下闭包吧,所以我还留下一个问题,这样会不会造成内存泄漏?

    相关文章

      网友评论

        本文标题:Js中防抖和节流的区别,论如何避免重复点击

        本文链接:https://www.haomeiwen.com/subject/nqhygctx.html