函數防手震和節流,這個知識點面試中被問到的機率比較高。
非立即執行版防手震可以理解為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中文網其他相關文章!