函數防手震和節流，這個知識點面試中被問到的機率比較高。
非立即執行版防手震可以理解為n時間後執行一次函數。立即執行版防手震是立即執行一次函數。
/**
* @desc 函数防抖
* @param {Function} func 函数
* @param {Number} wait 延迟执行毫秒数
* @param {Boolean} immediate true 表示立即执行，false 表示非立即执行
*/
function debounce(func, wait, immediate) {
let timeout
return function () {
let context = this
let args = arguments
if (timeout) {
clearTimeout(timeout)
}
if (immediate) {
let callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) {
typeof func === 'function' && func.apply(context, args)
}
} else {
timeout = setTimeout(() => {
typeof func === 'function' && func.apply(context, args)
}, wait)
}
}
}節流可以理解為每隔n時間執行一次函數。
/**
* @desc 函数节流
* @param {Function} func 函数
* @param {Number} wait 延迟执行毫秒数
* @param {Boolean} type true 表示时间戳版，false 表示定时器版
*/
function throttle(func, wait, type) {
let previous
let timeout
if (type) {
previous = 0
} else {
timeout
}
return function () {
let context = this
let args = arguments
if (type) {
let now = Date.now()
if (now - previous > wait) {
typeof func === 'function' && func.apply(context, args)
previous = now
}
} else {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null
typeof func === 'function' && func.apply(context, args)
}, wait)
}
}
}
}#用文字方塊輸入文字來示範的話，假如時間都設定為1s，使用者不斷輸入文字，如果是非立即執行防手震的話是停止輸入1s後函數執行，只執行一次，如果是立即執行的防手震的話是立即函數執行，只執行一次。節流則是在使用者輸入期間，每隔一秒執行一次函數，可能會執行多次。
下面程式碼防抖函數和節流函數都呼叫了10000000次，但是防手震函數只會執行一次，可是節流函數就很多次了。
let debounceCallback = debounce(function () {
console.log('debounceCallback')
}, 1000, false)
for (let i = 0; i < 10000000; i++) {
debounceCallback()
}
let throttleCallback = throttle(function () {
console.log('throttleCallback')
}, 1000, false)
for (let i = 0; i < 10000000; i++) {
throttleCallback()
}推薦教學：《JS教學》
以上是輕鬆理解函數防手震和節流的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
