在日常開(kāi)發(fā)過(guò)程中，我們肯定經(jīng)常需要對(duì)一些持續(xù)觸發(fā)事件進(jìn)行綁定，比如resize、scroll、mousemove 等等(我經(jīng)常遇到的是按鈕被不斷點(diǎn)擊，被測(cè)試題 BUG)。但是不希望事件在持續(xù)觸發(fā)的時(shí)候頻繁去觸發(fā)函數(shù)；

當(dāng)遇到這樣的時(shí)候我們?cè)撊绾谓鉀Q呢？就有了 防抖和節(jié)流；
讓我們先來(lái)看看在事件持續(xù)觸發(fā)的過(guò)程中頻繁執(zhí)行函數(shù)是怎樣的一種情況。
貼代碼

//html代碼 自己復(fù)制好
 <div
      id="content"
      style="height:300px;line-height:300px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"
    ></div>
  <script>
    let num = 1;
    let content = document.getElementById('content');
    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = count;
</script>

當(dāng)onmousemove事件在div上面移動(dòng)的時(shí)候。持續(xù)觸發(fā)事件并且持續(xù)調(diào)用函數(shù)；

image.png

下面直接看解決辦法吧；

防抖（debounce）

所謂防抖，就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間。

這這邊寫(xiě)2個(gè)函數(shù)，分別是不立即執(zhí)行和立即執(zhí)行。

//不是立即執(zhí)行版本
function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}

當(dāng)學(xué)習(xí)網(wǎng)上代碼時(shí)候。我一個(gè)疑惑是setTimeout還有返回值嗎？之前真的沒(méi)注意到。于是百度了一波返回一個(gè) ID（數(shù)字），可以將這個(gè)ID傳遞給 clearTimeout() 來(lái)取消執(zhí)行。 哈哈 只怪自己太菜了~

//觸發(fā)地方調(diào)用debounce函數(shù)，傳入執(zhí)行函數(shù)和時(shí)間
content.onmousemove = debounce(count,1000);

好了看下效果吧

png

代碼實(shí)現(xiàn)邏輯就是(大白話)：不斷觸發(fā)函數(shù)時(shí)候。因?yàn)閟etTimeOut函數(shù)發(fā)生是持續(xù)的。我們就不斷的清除掉前一次的執(zhí)行代碼.當(dāng)停下來(lái)時(shí)候觸發(fā)當(dāng)前的函數(shù)就可以了

學(xué)習(xí)到代碼實(shí)現(xiàn)的細(xì)節(jié)

let context = this;
let args = arguments;
func.apply(context, args)

在學(xué)習(xí)過(guò)程中。我看到了以上代碼，直接調(diào)用傳進(jìn)來(lái)函數(shù)，功能仿佛也是可以實(shí)現(xiàn)的；為什么還這樣寫(xiě)呢？是為了讓 debounce 函數(shù)最終返回的函數(shù) this 指向不變以及依舊能接受到 e 參數(shù)。 知道就行吧~

在貼一下立即執(zhí)行的代碼；立即執(zhí)行版的意思是觸發(fā)事件后函數(shù)會(huì)立即執(zhí)行，然后 n 秒內(nèi)不觸發(fā)事件才能繼續(xù)執(zhí)行函數(shù)的效果

function debounce(func,wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)
        if (callNow) func.apply(context, args)
    }
}

節(jié)流（throttle）

所謂節(jié)流，就是指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù)。 節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率。
對(duì)于節(jié)流，一般有兩種方式可以實(shí)現(xiàn)，分別是時(shí)間戳版和定時(shí)器版。

//時(shí)間戳版本
function throttle(func, wait) {
    var previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

使用方式依舊：

content.onmousemove = throttle(count,1000);

png

代碼實(shí)現(xiàn)邏輯就是(大白話)：不斷觸發(fā)函數(shù)時(shí)候。記錄上一次執(zhí)行時(shí)間戳和當(dāng)前的時(shí)間戳。如果之間時(shí)間差小于傳入的時(shí)間就觸發(fā)。

可以看下效果；顯示是均勻的1秒鐘觸發(fā)一次了；上面寫(xiě)完時(shí)間戳的版本在看下定時(shí)器版本的吧；

//定時(shí)器版
function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

代碼實(shí)現(xiàn)邏輯就是(大白話)：其實(shí)這個(gè)和時(shí)間戳版差不多。差別在初始化了一個(gè)變量控制觸發(fā)執(zhí)行函數(shù)。這個(gè)函數(shù)值在setTimeout中進(jìn)行改變。實(shí)現(xiàn)了均勻觸發(fā)的效果；
好了 今天的學(xué)習(xí)到此了~：
文藏參考:文章出處