防抖
防抖函数:当持续触发事件,一定时间内没有再次触发事件,事件处理函数才会执行一次。如果设定的时间到来之前,又一次触发事件,就重新开始延时。
实际应用:
- 使用echarts时,改变浏览器的宽度时,希望重新渲染;
- 输入搜索。输入结束后n秒才进行搜索请求,n秒内输入的内容重新记时。
<input id="content" type="text" placeholder="请输入">
<script>
function debounce(fun, delay) {
let time
return function (tar) {
clearTimeout(time)
time = setTimeout(() => {
fun(tar)
}, delay);
}
}
let content = document.getElementById('content')
let fangdou = debounce(getTarget, 1000)
function getTarget(tar){
console.log(tar)
}
content.addEventListener('keyup', function(e) {
fangdou(e.target.value)
})
</script>
节流
当持续触发事件的时候,保证一段时间内,只能调用一次事件处理函数。(一段时间,只做一件事。)
实际应用:鼠标不断触发,规定在n秒内多次点击只有一次生效。
function throttle(fun, delay) {
let time
return function() {
if(!time) {
time = setTimeout(() => {
time = undefined
fun()
}, delay);
}
}
}
let btn = document.getElementById('btn')
function getLog() {
console.log('lyz')
}
let jieliu = throttle(getLog, 2000)
btn.addEventListener('click', function () {
jieliu()
})