防抖(debounce)
触发高频事件后 n秒内 函数只执行一次
如果n秒内高频事件再次触发,则重新计算事件
防抖场景:
1.登录、发短信等按钮避免用户点击太快,以至于发送多次请求,需要防抖
2.调整浏览器窗口大小时,resize次数过于频繁,造成计算过多,此时需要一次到位,就需要防抖
3.文本编辑器实时保存,当无任何更改操作一秒后进行保存
防抖代码:
function debounce(func, wait) {
let timeout;
return function () {
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(this, arguments)
}, wait);
}
}
防抖代码:添加是否立即执行功能
function debounce(func, wait, immediate) {
let timeout;
return function () {
if (timeout) clearTimeout(timeout)
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null
}, wait);
if(callNow) func.apply(this,arguments)
} else {
timeout = setTimeout(() => {
console.log(this)
func.apply(this, arguments)
}, wait);
}
}
}
防抖方法的使用
在input框中输入文字 和 点击提交触发事件 使用num模拟请求次数
<div>
<input type="text" id="search" />
<button id="btn">提交</button>
<div id="content"style="background:pink;padding:60px;text-align:center;font-size:40px">0</div>
</div>
let num = 1
let search = document.getElementById("search")
let content = document.getElementById("content")
function count() {
content.innerHTML = num++
}
search.onkeyup = debounce(count,1000)
btn.onclick = debounce(count,1000,true)
节流(throttle)
高频事件触发 但 ** n秒内 函数只执行一次 **
所以节流会稀释函数的执行频率
比如:1s内发生一次,一分钟发生一次
节流场景:
1.scroll事件,每隔一秒计算一次位置信息等
2.浏览器播放事件,每隔一秒计算一次进度信息等
3.input实时搜索并发送请求展示下拉列表,每隔一秒发送一次请求(也可做防抖)
节流代码(实现方式一):
function throttle(func, wait) {
let timeout;
return function () {
if (!timeout) {
timeout = setTimeout(()=>{
timeout = null
func.apply(this,arguments)
},wait)
} else {
}
}
}
节流代码(实现方式二):使用时间戳计算
function throttle2(func, wait) {
let previous = 0;
return function () {
let noe = Date.now();
if (now - previous > wait) {
func.apply();
previous = now
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)