理解函数防抖 & 函数节流

函数防抖 & 函数节流

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

函数防抖（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来判断

总结：
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。
函数节流就是射击游戏的射速，就算不停按着鼠标射击，也只会在规定射速内射出子弹。