轻松理解函数防抖和节流的使用

前言

函数防抖和节流，这个知识点面试中被问的概率比较高。

防抖

非立即执行版防抖可以理解为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教程》

以上就是轻松理解函数防抖和节流的使用的详细内容，更多内容请关注技术你好其它相关文章！