手写题目一:手写节流和手写防抖

start

  • 最近高频出现防抖节流的问题。
  • 要求是可以手写。

1.概念

  1. 防抖:防止抖动, 短时间内触发多次,最终只触发一次;
  2. 节流:减少流量,短时间内触发多次,我每隔一段时间触发一次;

2.手写防抖

代码

// 防抖
function debounce(fn, wait,) {
  var timer
  return function () {
    var that = this
    var arg = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(that, arg)
    }, wait)
  }
}

思路

  1. 首先肯定要定义一个函数;
  2. 函数的参数是,一个是需要被执行的函数fn,一个是等待时间wait;
  3. 需要定义一个匿名函数当做返回值;
  4. 定时器,等待wait时间;
  5. 处理fn的this,处理参数arguments;
  6. 定义一个变量 timer,存储定时器的值。
  7. 定时器处理的核心逻辑: 只要当前函数执行了,就清除之前的,重新定义。

2.节流

代码

// 节流
function throttle(fn, wait) {
  var timer
  return function () {
    var that = this
    var args = arguments
    if (!timer) {
      timer = setTimeout(function () {
        timer = null
        fn.apply(that, args)
      }, wait)
    }
  }
}

思路

  1. 首先肯定要定义一个函数;
  2. 函数的参数是,一个是需要被执行的函数fn,一个是等待时间wait;
  3. 需要定义一个匿名函数当做返回值;
  4. 定时器,等待wait时间;
  5. 处理fn的this,处理参数arguments;
  6. 定义一个变量 timer,存储定时器的值。
  7. 定时器处理的核心逻辑: 不存在定时器再重新初始化,在定时器执行完毕后,清空定时器。

end

  • 主要的核心逻辑就上述代码。
  • 再额外的拓展就是:1.取消定时器的功能;2.是否立即执行的功能等配置项;

你可能感兴趣的:(javascript,js手写题目,javascript,前端,开发语言)