您当前的位置:网站首页>JS>轻松理解函数防抖和节流的使用 找JS教程就上ki4.cc (>^ω^<),JavaScript

轻松理解函数防抖和节流的使用 找JS教程就上ki4.cc (>^ω^<),JavaScript

2020年06月18日 投稿作者: 围观人数:19

Node.js中Stream-可读流的使用 找JS教程就上ki4.cc (>^ω^<)

可读流是生产数据用来供程序消费的流。常见的数据生产方式有读取磁盘文件、读取网络请求内容等,本文介绍Node.js中Stream-可读流的使用

前言

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

防抖

非立即执行版防抖可以理解为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时间执行一次函数。

对JavaScript开发者非常有用的10个奇淫巧计 找JS教程就上ki4.cc (>^ω^<)

你可能错过这些非常有用的技巧,我们知道,JavaScript 这门语言正在高速发展中。伴随着 ES2020,又有很多很棒的功能加入,我将介绍对JavaScript开发者非常有用的10个奇淫巧计。

节流的实现

/**
 * @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教程》

以上就是轻松理解函数防抖和节流的使用的详细内容,更多请关注ki4导航其它相关文章!

前端笔试中的坑位-JS隐式转换问题 找JS教程就上ki4.cc (>^ω^<)

我们在写笔试题的时候,经常碰到涉及隐式转换的题目,下面介绍前端笔试中的坑位-JS隐式转换问题。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.