摘要:事件节流和防抖是为了解决开发过程中遇到性能问题,常见于,频繁点击等事件节流设置一个时间间隔,时间间隔内只允许执行一次,好像客运站大巴,到点才会走。问题解决的原理就是事件节流随便晃几下执行了多次这也就是卡顿的根源。
事件节流和防抖是为了解决开发过程中遇到性能问题,常见于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点赞是我的动力!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100944.html
阅读 1075·2021-09-29 09:35
阅读 4621·2021-09-22 15:24
阅读 1448·2021-07-25 21:37
阅读 2177·2019-08-30 14:17
阅读 964·2019-08-30 13:56
阅读 2410·2019-08-29 17:07
阅读 1248·2019-08-29 12:44
阅读 2704·2019-08-26 18:26