美文网首页
实现个简单的防抖节流

实现个简单的防抖节流

作者: 土豪码农 | 来源:发表于2019-07-12 08:23 被阅读0次

    什么是防抖和节流?有什么区别?如何实现?

    节流是在一定时间内只能触发一次,可以应用于监听滚动条,减少同一时间触发的次数
    防抖是触发后一定时间才会调用并且重新触发又会重新计时,可以用于监听input输入合法性

    防抖

            const throttle = (fn, sec) => {
                if (typeof fn !== 'function') return
                let flag = true
                return function () {
                    if (!flag) return
                    fn.apply(this, [...arguments])
                    flag = false
                    setTimeout(() => {
                        flag = true
                    }, sec);
                }
            }
    

    节流

            const debounce = (fn, sec) => {
                if (typeof fn !== 'function') return
                let timer = null
                return function () {
                    clearTimeout(timer)
                    timer = setTimeout(() => {
                        fn.apply(this, [...arguments])
                    }, sec);
                }
            }
    

    相关文章

      网友评论

          本文标题:实现个简单的防抖节流

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