您的位置 首页 技术

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

前言 函数防抖和节流,这个知识点面试中被问的概率比较高。 防抖 非立即执行版防抖可以理解为n时间后执行一次函数。立即执行版防抖是立即执行一次函数。 防抖的实现 /** * @des…

前言

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

防抖

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

以上就是轻松理解函数防抖和节流的使用的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:http://www.24ketang.cn/80259.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回顶部