先介绍下 我的个人理解吧。
防抖:同一个事件短时间多次出发只会触发一次。
节流:每隔一段时间触发一次
最常用的大概就是搜索 窗口滚动
下面鼠标移动事件为例
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
height: 300px;
background: #000;
line-height: 300px;
text-align: center;
color: #ffffff;
font-size: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
//防抖节流
let myDiv = document.getElementsByTagName('div')[0]
let count = 0;
function add(){
this.innerText = count++ //这里用this而不用myDiv 后面有解释 当然也可以用myDiv
}
myDiv.onmousemove = debounce(add)
function debounce(func){
var timeOut;
return function(){
let that = this
clearTimeout(timeOut)
timeOut = setTimeout(()=>{
//setTimeout 是window.setTimeout,this的指向是window
func.apply(that)
},1000)
}
}
到此防抖的基本用法已经有了 但是有些人可能会发现第一次出发也要等一秒钟才执行,你的铲平** 就来给你说这不符合交互啊 没办法只能改了
myDiv.onmousemove = debounce(add,true) //加一个Boolean解决第一次是否要执行
function debounce(func,flag){
var timeOut;
return function(){
let that = this
clearTimeout(timeOut)
if(flag){//真 执行
if(!timeOut){
func.apply(that)
timeOut = 1//这边随便赋一个值 要不然下次 !timeOut == true 还是
}else{
timeOut = setTimeout(()=>{
func.apply(that)
},1000)
}
}else{
timeOut = setTimeout(()=>{
func.apply(that)
},1000)
}
}
}
以上基本就是防抖的全部内容了
关于节流其实基本是按远离和这个差不多,印象最深的还是一位老师提过的(尿不尽)
大概意思就是按照一定频率一直**。好吧,你们应该懂得 ,下面来看代码
还是上面的div鼠标一定事件
myDiv.onmousemove = throttle(add,1000) //1秒执行一次
function throttle(func,waitTime){
var time = 0;
return function(){
let that = this
var nowTime = Date.now()//或者 +new Date() ; new Date().getTime()都可以 获取当前时间戳
if(nowTime - time > waitTime){
func.apply(that)
time = nowTime
}
}
}
好了 完成 希望对您有所帮助