資訊專欄INFORMATION COLUMN
摘要：而上述兩種方法，就叫做函數(shù)的節(jié)流和防抖。二函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流函數(shù)節(jié)流函數(shù)節(jié)流是讓這個函數(shù)在間隔某一段時間執(zhí)行一次。在這個項目中，我認為函數(shù)節(jié)流和函數(shù)防抖都能很好的解決問題。
一 項目需求
最近在做一些小的練手代碼的時候，碰到了一個很常見的問題，當在搜索框中進行搜索的時候，如果快速輸入很多字符的話，搜索框的監(jiān)聽回調函數(shù)會執(zhí)行很多次，如果回調業(yè)務較復雜的話，可能會導致頁面運行緩慢甚至是奔潰，那么我們如何解決這個問題呢，讓輸入框在不在輸入的情況下執(zhí)行回調，或者每間隔一段時間執(zhí)行一次回調都可以解決這一問題。而上述兩種方法，就叫做函數(shù)的節(jié)流和防抖。
二 函數(shù)節(jié)流和函數(shù)防抖 2.1 函數(shù)節(jié)流函數(shù)節(jié)流：函數(shù)節(jié)流是讓這個函數(shù)在間隔某一段時間執(zhí)行一次。以輸入框為例，假設你想查詢xxxx,你想實現(xiàn)當我開始輸入多少秒之后，執(zhí)行查詢操作。（并不一定要輸入完畢）
想看效果請點擊這里
函數(shù)防抖：函數(shù)防抖是讓這個函數(shù)在執(zhí)行上一次之后過了你規(guī)定的時間再執(zhí)行的一種方法。以輸入框為例，假設你要查詢xxxx，你想實現(xiàn)當我輸完了xxxx之后，再進行查詢操作，那么你就需要用到函數(shù)防抖。
經典的函數(shù)防抖實踐如下：
function throttle(method,context){
clearTimeout(method.tId)
method.tId = setTimeout(function(){
method.call(context)
},1000)
}
想看效果請點擊這里
三 最佳實踐通過上敘的描述，我們對于函數(shù)防抖和函數(shù)節(jié)流有了一定的認識。在這個項目中，我認為函數(shù)節(jié)流和函數(shù)防抖都能很好的解決問題。所以這里把函數(shù)節(jié)流和函數(shù)防抖封裝在了一個函數(shù)里，通過第三個參數(shù)切換模式。代碼如下
const throttle = function(fn, delay, isDebounce) {
let timer
let lastCall = 0
return function (...args) {
if (isDebounce) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn(...args)
}, delay)
} else {
const now = new Date().getTime()
if (now - lastCall < delay) return
lastCall = now
fn(...args)
}
}
}
通過第三個參數(shù)，可以控制到底使用函數(shù)防抖還是函數(shù)節(jié)流。
四 總結函數(shù)防抖實現(xiàn)的核心在于每次都去clear一個延時器，然后每次執(zhí)行函數(shù)的時候，都去clear以前的延時器。只有當你中斷輸入的時候，才會去執(zhí)行相應回調。而函數(shù)節(jié)流的核心是去判斷當前時間和開始時間的間隔是否到達了設置的delay值，如果達到了，就執(zhí)行一次回調。沒有則不執(zhí)行。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/83362.html
摘要：可以是數(shù)字或者是字符串如果是數(shù)字則表示屬性名前加上空格符號的數(shù)量，如果是字符串，則直接在屬性名前加上該字符串。 最后更新于2019年1月13日 前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.打亂數(shù)組中元素順序（類似音樂隨機播放） function...
摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。 寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發(fā)中一些功能點的實現(xiàn)，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...
摘要：函數(shù)節(jié)流函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。函數(shù)防抖函數(shù)在特定的時間內不被再調用后執(zhí)行。一句話概括函數(shù)節(jié)流是從用戶開始輸入就開始計時，而函數(shù)節(jié)流是從用戶停止輸入開始計時。 函數(shù)節(jié)流 & 函數(shù)防抖 函數(shù)節(jié)流和函數(shù)防抖 函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。下面貼英文原文，建議認真閱讀：Debouncing enforces that a function ...
閱讀 1500·2021-09-13 10:25
閱讀 644·2019-08-30 15:53
閱讀 2337·2019-08-30 15:44
閱讀 2132·2019-08-29 17:20
閱讀 1669·2019-08-29 16:36
閱讀 1878·2019-08-29 14:10
閱讀 1865·2019-08-29 12:44
閱讀 1255·2019-08-23 14:13
