节流与防抖
一、节流
-
概念:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。
-
类似于技能CD。
-
应用:点击按钮,轮播图点击左右箭头。
-
插件lodash.js,它里面封装了函数的防抖与节流业务。
<p>计数器:<span>0</span></p>
<button>+1</button>
// 获取元素
let span = document.querySelector('span')
let btn = document.querySelector('button')
let count = 0
let timer = null
// 控制节流阀是否开启或关闭
let flag = true
// 需求:在一秒以内,不管点击按钮多少次,计数器数值只能+1
btn.onclick = function () {
if (flag) {
flag = false
timer = setTimeout(() => {
count++
span.innerHTML = count
flag = true
}, 1000)
}
}
二、防抖
-
概念:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行一次。
-
类似于LOL回城被打断。
-
应用:输入框搜索。
-
插件lodash.js,它里面封装了函数的防抖与节流业务。
<input type="text" @input="inputFn" />
data () {
return {
timer: null
}
},
methods: {
inputFn () {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
// 发送网络请求
}, 3000)
}
}