javascript事件节流和防抖

Benedict Evans 发布于2019-08-23 14:39 / 2153人阅读

摘要：事件节流和防抖是为了解决开发过程中遇到性能问题，常见于，频繁点击等事件节流设置一个时间间隔，时间间隔内只允许执行一次，好像客运站大巴，到点才会走。问题解决的原理就是事件节流随便晃几下执行了多次这也就是卡顿的根源。

事件节流和防抖是为了解决开发过程中遇到性能问题，常见于onscroll、onresize，频繁点击button等

事件节流

设置一个时间间隔，时间间隔内只允许执行一次，好像客运站大巴，到点才会走。

问题：

多年前遇到过一个onresize问题，页面满屏布局，模块很多dom结构也相对复杂。所以在窗口频繁快速变化大小的时候页面反应异常卡顿。

解决办法：

说实话当初意识到是性能问题不过不知道怎么解决，搜索了很多相关问题，最后在https://stackoverflow.com找到...，遗憾的是具体的链接忘了。不过也是因为这个问题宋词爱上了这个网站，问题答案很靠谱。

//问题解决的原理就是事件节流

window.onresize = () => {
      console.log("resize")
}

随便晃几下执行了150多次,这也就是卡顿的根源。

解决这个问题我们需要减少执行次数。

          let timer = null
          window.onresize = () => {
                console.log(timer)
                if (!timer) {
                    timer = setTimeout(() => {
                        callBack()
                        timer = null
                    }, 1000)
                }
            }

            function callBack() {
                console.log("resize")
            }

这样不管我们一秒内晃动多少次callBack只执行一次，问题解决接下在封装一下

//封装前我们先思考一下，首先既然是封装那么事件不一定都是onersize、间隔时间得有用户设置、callBack得是用户写。

**其实我们只关心callBack，和执行间隔时间，恰好事件都有回调

            function callBack() {
                console.log("resize")
            }

            function throttle(callBack, time) {
                let timer = null
                //timer状态要常驻内存，这里做了一个闭包
                return function() {
                    if (!timer) {
                        timer = setTimeout(() => {
                            callBack()
                            timer = null
                        }, time)
                    }
                }
            }

            window.addEventListener("resize", throttle(callBack, 1000), false)

测试完美！

事件防抖

常用于验证码防刷，按钮频繁点击导致发起多次请求给服务端造成压力，代码策略是，事件结束一段时间内只执行一次时间段内再次触发重新计时，防抖原理类似趴活的黑车，永远喊得就差一位上车就走，等你上去他接着喊就差一位上车就走。。。擦有点乱看代码吧

//需求就是input输入内容停顿间隔1000ms后触发callback

            let oInput = document.querySelector("input")
                // oInput.addEventListener("input", function(e) {
                //     //如果直接每次onInput发请求，会导致性能问题
                //     console.log(e, this)
                // })

            oInput.addEventListener("input", debounce(callback, 500))

            function debounce(fn, delay) {
                let timer = null
                    // 绑定上下文this
                let self = this
                return function() {
                    let arg = arguments
                        // 每次清楚定时器
                    clearTimeout(timer)
                        // 重新打开定时器，做到只有最后一次执行了
                    timer = setTimeout(() => {
                        // 绑定this，传入参数给callback。通常我们需要事件对象就ok
                        fn.apply(this, arg)
                    }, delay)
                }
            }

            function callback(e) {
                console.log("触发", e.target.value)
            }

            function callback(e) {
                console.log("触发", e.target.value)
            }

输入了很多内容最后触发了一次callback，效果完美！

您的吐槽or点赞是我的动力！

私有云 GPU服务器 VUE防抖与节流 javascript事件 javascript键盘事件 javascript焦点事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100944.html

函数节流和防抖

摘要：当第二次调用该函数时，它会清除前一次的定时器并设置另一个。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。参考文章函数节流与函数防抖函数节流和函数去抖应用场景辨析函数节流函数防抖实现原理分析前言事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresi...

didikee 2019-08-23 13:50 评论0 收藏0
函数节流和防抖

摘要：当第二次调用该函数时，它会清除前一次的定时器并设置另一个。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。参考文章函数节流与函数防抖函数节流和函数去抖应用场景辨析函数节流函数防抖实现原理分析前言事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresi...

huaixiaoz 2019-08-02 12:09 评论0 收藏0
函数节流和防抖

摘要：当第二次调用该函数时，它会清除前一次的定时器并设置另一个。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。参考文章函数节流与函数防抖函数节流和函数去抖应用场景辨析函数节流函数防抖实现原理分析前言事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresi...

CHENGKANG 2019-08-29 17:28 评论0 收藏0
JS之节流和防抖

摘要：节流在指定时间之内，让函数只触发一次。防抖对于一定时间段的连续的函数调用，只让其执行一次。总结以上只是很简单的写了一下节流和防抖的原理，在里，实现起来更加复杂，但是背后的原理核心就是上边代码写的。概述在平时的开发中，经常会听到两个差不多很相近的词。节流（throttle）和防抖（debounce）。这是两个类似又有些不同的优化方案。节流：在指定时间之内，让函数只触发一次。防...

fevin 2019-08-26 17:15 评论0 收藏0