內容來源：SegmentFault社區(qū)

作者：nero

整理編輯：SegmentFault

曾經(jīng)面試時候被問到過這個，年少的我一臉無知。。。

后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發(fā)現(xiàn)之前的代碼竟然都沒做限制，輸入一次發(fā)一次請求。簡直忍不了，就在項目的utils里加上了防抖函數(shù)。正好做一個總結，加深印象。

函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。應用場景有很多，輸入框持續(xù)輸入，將輸入內容遠程校驗、多次觸發(fā)點擊事件、onScroll等等。為了說明問題，假設一個場景：鼠標滑過一個div，觸發(fā)onmousemove事件，它內部的文字會顯示當前鼠標的坐標。

<style>#box?{width:?1000px;height:?500px;background:?#ccc;font-size:?40px;text-align:?center;line-height:?500px;
????}style>

<div?id="box">div>

<script>const?box?=?document.getElementById('box')
??box.onmousemove?=?function?(e)?{
????box.innerHTML?=?`${e.clientX},?${e.clientY}`
??}script>

效果是這樣的：

在上邊的場景下，我們不希望觸發(fā)一次就執(zhí)行一次，這就要用到防抖或節(jié)流。下面我們看一下它們能為我們做什么吧。

防抖

函數(shù)防抖，這里的抖動就是執(zhí)行的意思，而一般的抖動都是持續(xù)的，多次的。假設函數(shù)持續(xù)多次執(zhí)行，
我們希望讓它冷靜下來再執(zhí)行。也就是當持續(xù)觸發(fā)事件的時候，函數(shù)是完全不執(zhí)行的，等最后一次觸發(fā)結束的
一段時間之后，再去執(zhí)行。先看一下效果：

分解一下需求：

• 持續(xù)觸發(fā)不執(zhí)行

• 不觸發(fā)的一段時間之后再執(zhí)行

那么怎么實現(xiàn)上述的目標呢？我們先看這一點：在不觸發(fā)的一段時間之后再執(zhí)行，那就需要個定時器呀，定時器里面調用我們要執(zhí)行的函數(shù)，將arguments傳入。封裝一個函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽是我們封裝的這個函數(shù)，將目標函數(shù)作為回調(func)傳進去，等待一段時間過后執(zhí)行目標函數(shù)

function?debounce(func,?delay)?{
??return?function()?{
????setTimeout(()?=>?{
??????func.apply(this,?arguments)
????},?delay)
??}
}

第二點實現(xiàn)了，再看第一點：持續(xù)觸發(fā)不執(zhí)行。我們先思考一下，是什么讓我們的函數(shù)執(zhí)行了呢？是上邊的setTimeout。OK，那現(xiàn)在的問題就變成了持續(xù)觸發(fā)，不能有setTimeout。這樣直接在事件持續(xù)觸發(fā)的時候，清掉定時器就好了。

function?debounce(func,?delay)?{
??let?timeout
??return?function()?{
????clearTimeout(timeout)?//?如果持續(xù)觸發(fā)，那么就清除定時器，定時器的回調就不會執(zhí)行。
????timeout?=?setTimeout(()?=>?{
??????func.apply(this,?arguments)
????},?delay)
??}
}

用法：

?box.onmousemove?=?debounce(function?(e)?{
????box.innerHTML?=?`${e.clientX},?${e.clientY}`
??},?1000)

節(jié)流：

節(jié)流的意思是讓函數(shù)有節(jié)制地執(zhí)行，而不是毫無節(jié)制的觸發(fā)一次就執(zhí)行一次。什么叫有節(jié)制呢？就是在一段時間內，只執(zhí)行一次。同樣，我們分解一下：

• 持續(xù)觸發(fā)并不會執(zhí)行多次

• 到一定時間再去執(zhí)行

效果是這樣的：

思考一下，持續(xù)觸發(fā)，并不會執(zhí)行，但是到時間了就會執(zhí)行。抓取一個關鍵的點：就是執(zhí)行的時機。

要做到控制執(zhí)行的時機，我們可以通過一個開關，與定時器setTimeout結合完成。

函數(shù)執(zhí)行的前提條件是開關打開，持續(xù)觸發(fā)時，持續(xù)關閉開關，等到setTimeout到時間了，再把開關打開，函數(shù)就會執(zhí)行了。我們看一下代碼怎么實現(xiàn)：

??function?throttle(func,?deley)?{
????let?run?=?true
????return?function?()?{
??????if?(!run)?{
????????return??//?如果開關關閉了，那就直接不執(zhí)行下邊的代碼
??????}
??????run?=?false?//?持續(xù)觸發(fā)的話，run一直是false，就會停在上邊的判斷那里
??????setTimeout(()?=>?{
????????func.apply(this,?arguments)
????????run?=?true?//?定時器到時間之后，會把開關打開，我們的函數(shù)就會被執(zhí)行
??????},?deley)
????}
??}

調用的時候：

?box.onmousemove?=?throttle(function?(e)?{
??box.innerHTML?=?`${e.clientX},?${e.clientY}`
},?1000)

這樣，就實現(xiàn)了節(jié)流，節(jié)流還可以用時間間隔去控制，就是記錄上一次函數(shù)的執(zhí)行時間，與當前時間作比較，如果當前時間與上次執(zhí)行時間的時間差大于一個值，就執(zhí)行。

說明一下節(jié)流時，后面操作中應該是因為run=false 所以才直接return，但是不是在return之前l(fā)et run=ture直接覆蓋掉之前的false

這里可以看一下throttle函數(shù)內部，和函數(shù)調用的時候。首先看函數(shù)內部，分解一下結構：

function?throttle(func,?deley)?{
????return?function?()?{
??????//?執(zhí)行func
????}
}

那調用時候呢？也分解一下：

throttle(function?()?{?//?目標函數(shù)內容?},?1000)

這里throttle函數(shù)執(zhí)行的結果是其內部return的function的調用。也就是說鼠標經(jīng)過的事件監(jiān)聽實際上是這個被return的function，不斷持續(xù)觸發(fā)的是它，而throttle函數(shù)只是提供了一個作用域，內部用閉包聲明了一個run的開關變量，由于閉包的存在，run這個變量會一直存在不被銷毀，而let run = true只在這個閉包(可以理解為作用域)內只聲明了一次，但它不會被持續(xù)執(zhí)行，所以return的函數(shù)內部的判斷不會被它覆蓋掉。根據(jù)打印結果可以看出，事實確實是如此：

總結：

防抖和節(jié)流巧妙地用了setTimeout，來控制函數(shù)執(zhí)行的時機，優(yōu)點很明顯，可以節(jié)約性能，不至于多次觸發(fā)復雜的業(yè)務邏輯而造成頁面卡頓。

---

歡迎關注?SegmentFault?微信公眾號?:)

總結

以上是生活随笔為你收集整理的timertask run函数未执行_函数的防抖和节流是个啥？？？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。