摘要:定义定时器清空定时器重置定时器防抖流程触发触发定义一个定时器,返回执行内容为清除当前定时器,定义执行内容。
防抖
</>复制代码
为了避免一些监听事件为在自己预料的情况,频繁触发。or 在某些监听命令会频繁触发事件比如resize、mousemove等等
未防抖 示例
</>复制代码
var count = 0,
Elem = doc.getElementById("con")
function appendCount(e) {
console.log(e);
Elem.innerHTML = count++
}
// 正常,没有防抖的情况下,直接监听执行
Elem.addEventListener("mousemove", function() {
appendCount()
})
这会导致,只要鼠标移动,会导致Eelm.innerHTML不断改变。现在看起来好像没什么问题,如果是很多数据渲染或者请求几千条列表数据呢?
会导致浏览器不断回流和重绘。
那如何防抖呢??触发mousemove时间后1s内,只有不在触发mousemove方法才会能执行appendCount()。
</>复制代码
var count = 0,
Elem = doc.getElementById("con");
function debounce(fn, waitTime){
// 定义定时器
var timeoutFn = null;
return function (){
// 清空定时器
clearTimeout(timeoutFn);
// 重置定时器
timeoutFn = (() => {
fn.apply(this, arguments)
},waitTime)
}
}
function appendCount(){
ELem.innerHTML=count++;
}
Elem.addEventListener("mousemove", debounce(appendCount, 500))
防抖流程
mousemove触发,触发debounce()`
定义一个定时器timeoutFn,返回执行内容为:清除当前timeoutFn定时器( timeoutFn = null;),定义执行内容。
</>复制代码
// debounce() 返回内容
function (){
// 清空定时器
clearTimeout(timeoutFn);
// 重置定时器
timeoutFn = (() => {
fn.apply(this, arguments)
},waitTime)
}
当mousemove再触发,timeoutFn定时器再次清空,重新定义执行内容
只有等到最后一次mousemove,定时器没有被debounce()清除timeoutFn定时器,最后执行 fn.apply(this, agruments);
节流</>复制代码
相对比防抖,我是这样理解节流的:当我们想触发在一段时间范围有且只触发一次这样的事件,这样我们可以更节约我们的资源和网络请求。
就当上面的AppendCount()举例,我只想在3s内之能触发一次事件AppendCount()。
那么应该怎么处理呢?
</>复制代码
var count = 0,
Elem = doc.getElementById("con");
function throttle(fn,waitTime){
var timeoutFn = null;
return function () {
// 如果存在timeoutFn定时器,则等待timeoutFn执行完成
if(!timeoutFn){
timeoutFn = (() => {
// 置空定时器
clearTimeout(timeoutFn)
fn.apply(this, arguments)
},waitTime)
}
}
}
function appendCount(){
ELem.innerHTML=count++;
}
Elem.addEventListener("mousemove", throttle(appendCount, 3000))
这和防抖不同的是,是等待timeoutFn执行完成后,通过clearTimeout(timeoutFn)置空,那么在3s后才能再次执行timeoutFn
还有一个写法,和上面有一点不同,上面的是当在第1s触发throttle,但是要在第4s才能执行appendCount。但是下面是立即执行,当第1s触发throttle,就执行appendCount,然后在第4s后可以再次会发throttle
</>复制代码
var count = 0,
Elem = doc.getElementById("con");
function throttle(fn, waitTime){
// 定义定时器、执行状态
var timeoutFn = null,
isRuning = false;
return function () {
// 如果不在执行状态
if(!isRuning){
// 开启执行状态
isRuning = true;
// 定义定时器
timeoutFn =(() => {
fn.apply(this, arguments);
// 执行完成,关闭执行状态
isRuning = false;
},waitTime)
}
}
}
function appendCount(){
ELem.innerHTML=count++;
}
Elem.addEventListener("mousemove", throttle(appendCount, 3000))
参考
JavaScript专题之跟着underscore学节流
JavaScript专题之跟着underscore学防抖
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106055.html
摘要:定义定时器清空定时器重置定时器防抖流程触发触发定义一个定时器,返回执行内容为清除当前定时器,定义执行内容。 防抖 为了避免一些监听事件为在自己预料的情况,频繁触发。or 在某些监听命令会频繁触发事件比如resize、mousemove等等 未防抖 示例 var count = 0, Elem = doc.getElementById(con) ...
摘要:若时间差大于间隔时间,则立刻执行一次函数。不同点函数防抖,在一段连续操作结束后,处理回调,利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。 原博客地址,欢迎star 函数防抖和节流 函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover...
摘要:运用防抖和节流可以有效降低代码的执行频率,从而解决高频率事件的页面卡顿问题。在阶段布局,最终确定显示的位置和大小。在函数中,首先定义了一个空的定时器变量,用来计算时间间隔。还有一点要注意,在中一定要清楚定时器,不然会影响的条件判断。 啥是节流? 节流是保证在一段时间内,代码只执行了一次。这个一段时间内指的是不管用户操作了几次,最终仅执行一次。比如说一个按钮,用户狂点按钮,但是如果用节流...
摘要:运用防抖和节流可以有效降低代码的执行频率,从而解决高频率事件的页面卡顿问题。在阶段布局,最终确定显示的位置和大小。在函数中,首先定义了一个空的定时器变量,用来计算时间间隔。还有一点要注意,在中一定要清楚定时器,不然会影响的条件判断。 啥是节流? 节流是保证在一段时间内,代码只执行了一次。这个一段时间内指的是不管用户操作了几次,最终仅执行一次。比如说一个按钮,用户狂点按钮,但是如果用节流...
阅读 936·2021-10-13 09:39
阅读 3594·2021-09-26 10:16
阅读 2945·2019-08-30 15:54
阅读 1081·2019-08-30 14:22
阅读 2923·2019-08-29 15:39
阅读 3314·2019-08-27 10:52
阅读 846·2019-08-26 13:59
阅读 1768·2019-08-26 12:20
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要