函数防抖 & 函数节流
函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。
函数防抖(debounce)与 函数节流(throttle) 都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
<!-- 防抖 节流 -->
<div class="box">
没有防抖的 input:<input type="text" class="ipt1">
有防抖后的 input:<input type="text" class="ipt2">
有节流后的 input:<input type="text" class="ipt3">
</div>
<div class="comment"></div>
<script>
var ipt1 = document.querySelector('.ipt1');
var ipt2 = document.querySelector('.ipt2');
var ipt3 = document.querySelector('.ipt3');
var comment = document.querySelector('.comment');
// 没有防抖
function ajax1(){
fetch('anti-shake.php?input='+ipt1.value)
.then(res => res.text())
.then(data => {
comment.innerHTML += data;
})
}
ipt1.onkeyup = function (){
ajax1();
}
防抖 debounce
在事件被触发一段时间后再执行回调,如果在这一段时间内又被触发,则重新计时。
function ajax2(){
fetch('anti-shake.php?input='+ipt2.value)
.then(res => res.text())
.then(data => {
comment.innerHTML += data;
})
}
var deferTimer;
ipt2.onkeyup = function (){
clearTimeout(deferTimer);
deferTimer = setTimeout(function (){
ajax2();
},400);
}
函数防抖(debounce)
function ajax2(){
fetch('anti-shake.php?input='+ipt2.value)
.then(res => res.text())
.then(data => {
comment.innerHTML += data;
})
}
function debounce(delay, callback){
var deferTimer;
return function (){
clearTimeout(deferTimer);
deferTimer = setTimeout(function (){
callback();
},delay);
}
}
var debounceAjax = debounce(400, ajax2);
ipt2.onkeyup = function (){
debounceAjax();
}
节流 throttle
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
function ajax3(){
fetch('anti-shake.php?input='+ipt3.value)
.then(res => res.text())
.then(data => {
comment.innerHTML += data;
})
}
var lastTime = Date.now();
ipt3.onkeyup = function (){
var nowTime = Date.now();
if (nowTime - lastTime >= 1000) {
lastTime = nowTime;
ajax3();
}
}
函数节流(throttle)
function ajax3(){
fetch('anti-shake.php?input='+ipt3.value)
.then(res => res.text())
.then(data => {
comment.innerHTML += data;
})
}
function throttle(delay,callback){
var lastTime = Date.now();
return function (){
var nowTime = Date.now();
if (nowTime - lastTime >= delay) {
lastTime = nowTime;
callback();
}
}
}
var throttleAjax = throttle(1000, ajax3);
ipt3.onkeyup = function (){
throttleAjax();
}
应用场景:
防抖 debounce
search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次。
节流 throttle
鼠标不断点击触发,mousedown(单位时间内只触发一次)
监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
总结:
函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。
函数防抖就是法师发技能的时候要读条,技能读条没完再按技能就会重新读条。
函数节流就是射击游戏的射速,就算不停按着鼠标射击,也只会在规定射速内射出子弹。