函数的防抖和节流
程序员文章站
2022-11-05 09:03:11
虽然简单,还是记录一下 function fn1() { let dom=document.body; let time; dom.addEventListener('mousemove',()=>{ clearTimeout(time); time=setTimeout(()=>{ console.log('send aj...
虽然简单,还是记录一下
<!-- 函数防抖 如果事件触发太快(时间间隔小于我们规定的时间),则只执行最后一次事件的业务代码-->
<!-- 常见例子:搜索框在输入停止后(暂停时间大于我们规定时间)才发起请求-->
function fn1() {
let dom=document.body;
let time;
dom.addEventListener('mousemove',()=>{
clearTimeout(time);
time=setTimeout(()=>{
console.log('send ajax fn1');//你的业务代码
},500)
})
}
<!-- 函数节流 无论事件触发多快,只在规定间隔内执行业务代码-->
<!-- 常见例子:连续点击多次按钮,除了第一次,往后每隔一定时间再次触发事件才执行一次业务代码-->
function fn2(){
let dom=document.body;
let flag=true;
dom.addEventListener('click',()=>{
if(flag){
console.log('send ajax fn2');//你的业务代码
flag=false
setTimeout(()=>{
flag=true;
},2000)
}
})
}
本文地址:https://blog.csdn.net/qq_42031498/article/details/109360207
下一篇: 南汉为什么会是太监王朝 为什么当官要自宫
推荐阅读
-
Linux unlink函数和删除文件的操作方法
-
go语言的panic和recover函数用法实例
-
OpenGL关于glStencilFuncSeparate()和glStencilFunc()函数的区别讲解
-
php实现的DateDiff和DateAdd时间函数代码分享
-
js的验证函数和常用正则表达式
-
c++ 拷贝构造函数(重点在内含指针的浅拷贝和深拷贝)
-
smarty模板引擎中内建函数if、elseif和else的使用方法
-
OpenCV中的新函数connectedComponentsWithStats使用(python和c++实例)
-
javascript防抖函数debounce详解
-
一文看懂如何简单实现节流函数和防抖函数