timertask run函数未执行_函数的防抖和节流是个啥？？？
內容來源：SegmentFault社區
作者：nero
整理編輯：SegmentFault
曾經面試時候被問到過這個，年少的我一臉無知。。。
后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發現之前的代碼竟然都沒做限制，輸入一次發一次請求。簡直忍不了，就在項目的utils里加上了防抖函數。正好做一個總結，加深印象。
函數防抖和節流，都是控制事件觸發頻率的方法。應用場景有很多，輸入框持續輸入，將輸入內容遠程校驗、多次觸發點擊事件、onScroll等等。為了說明問題，假設一個場景：鼠標滑過一個div，觸發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>
效果是這樣的：
在上邊的場景下，我們不希望觸發一次就執行一次，這就要用到防抖或節流。下面我們看一下它們能為我們做什么吧。
防抖
函數防抖，這里的抖動就是執行的意思，而一般的抖動都是持續的，多次的。假設函數持續多次執行，
我們希望讓它冷靜下來再執行。也就是當持續觸發事件的時候，函數是完全不執行的，等最后一次觸發結束的
一段時間之后，再去執行。先看一下效果：
分解一下需求：
持續觸發不執行
不觸發的一段時間之后再執行
那么怎么實現上述的目標呢？我們先看這一點：在不觸發的一段時間之后再執行，那就需要個定時器呀，定時器里面調用我們要執行的函數，將arguments傳入。封裝一個函數，讓持續觸發的事件監聽是我們封裝的這個函數，將目標函數作為回調(func)傳進去，等待一段時間過后執行目標函數
function?debounce(func,?delay)?{??return?function()?{
????setTimeout(()?=>?{
??????func.apply(this,?arguments)
????},?delay)
??}
}
第二點實現了，再看第一點：持續觸發不執行。我們先思考一下，是什么讓我們的函數執行了呢？是上邊的setTimeout。OK，那現在的問題就變成了持續觸發，不能有setTimeout。這樣直接在事件持續觸發的時候，清掉定時器就好了。
function?debounce(func,?delay)?{??let?timeout
??return?function()?{
????clearTimeout(timeout)?//?如果持續觸發，那么就清除定時器，定時器的回調就不會執行。
????timeout?=?setTimeout(()?=>?{
??????func.apply(this,?arguments)
????},?delay)
??}
}
用法：
?box.onmousemove?=?debounce(function?(e)?{????box.innerHTML?=?`${e.clientX},?${e.clientY}`
??},?1000)
節流：
節流的意思是讓函數有節制地執行，而不是毫無節制的觸發一次就執行一次。什么叫有節制呢？就是在一段時間內，只執行一次。同樣，我們分解一下：
持續觸發并不會執行多次
到一定時間再去執行
效果是這樣的：
思考一下，持續觸發，并不會執行，但是到時間了就會執行。抓取一個關鍵的點：就是執行的時機。
要做到控制執行的時機，我們可以通過一個開關，與定時器setTimeout結合完成。
函數執行的前提條件是開關打開，持續觸發時，持續關閉開關，等到setTimeout到時間了，再把開關打開，函數就會執行了。我們看一下代碼怎么實現：
??function?throttle(func,?deley)?{????let?run?=?true
????return?function?()?{
??????if?(!run)?{
????????return??//?如果開關關閉了，那就直接不執行下邊的代碼
??????}
??????run?=?false?//?持續觸發的話，run一直是false，就會停在上邊的判斷那里
??????setTimeout(()?=>?{
????????func.apply(this,?arguments)
????????run?=?true?//?定時器到時間之后，會把開關打開，我們的函數就會被執行
??????},?deley)
????}
??}
調用的時候：
?box.onmousemove?=?throttle(function?(e)?{??box.innerHTML?=?`${e.clientX},?${e.clientY}`
},?1000)
這樣，就實現了節流，節流還可以用時間間隔去控制，就是記錄上一次函數的執行時間，與當前時間作比較，如果當前時間與上次執行時間的時間差大于一個值，就執行。
說明一下節流時，后面操作中應該是因為run=false 所以才直接return，但是不是在return之前let run=ture直接覆蓋掉之前的false
這里可以看一下throttle函數內部，和函數調用的時候。首先看函數內部，分解一下結構：
function?throttle(func,?deley)?{????return?function?()?{
??????//?執行func
????}
}
那調用時候呢？也分解一下：
throttle(function?()?{?//?目標函數內容?},?1000)這里throttle函數執行的結果是其內部return的function的調用。也就是說鼠標經過的事件監聽實際上是這個被return的function，不斷持續觸發的是它，而throttle函數只是提供了一個作用域，內部用閉包聲明了一個run的開關變量，由于閉包的存在，run這個變量會一直存在不被銷毀，而let run = true只在這個閉包(可以理解為作用域)內只聲明了一次，但它不會被持續執行，所以return的函數內部的判斷不會被它覆蓋掉。根據打印結果可以看出，事實確實是如此：
總結：
防抖和節流巧妙地用了setTimeout，來控制函數執行的時機，優點很明顯，可以節約性能，不至于多次觸發復雜的業務邏輯而造成頁面卡頓。
歡迎關注?SegmentFault?微信公眾號?:)
總結
以上是生活随笔為你收集整理的timertask run函数未执行_函数的防抖和节流是个啥？？？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows cmd post请求_c
- 下一篇： python queue get 方法_