前言函数防抖和节流,这个知识点面试中被问的概率比较高。
防抖非立即执行版防抖可以理解为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教程》
以上就是轻松理解函数防抖和节流的使用的详细内容。