js基础编程-题目5 防抖节流

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

防抖节流

什么是防抖和节流？有什么区别？如何实现？

这里我换一种答题方法，我先把概念讲清楚

• 定义

防抖(debounce)：强制函数在某一时间段只执行一次
节流(throttle)：强制函数以固定的频率执行

• debounce 和 throttle 的区别
  用 scroll 事件测试防抖节流的区别：
  链接：scroll事件测试链接
  用 mousemove 事件测试防抖节流的区别：
  链接：mousemove事件测试链接
  用 click 事件测试防抖节流的区别
  链接：click事件测试链接
• 实现 throttle 和 debounce

书写时需要考虑的三个问题 1.this指向 2.事件源对象的获取 3.高阶函数的理解
实现debounce

const debounce = (fn, delay = 300, timer = null) => {
  return function (...args) {//flag
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), delay)
  }
}

flag处：可能会有疑问，为什么用函数，不用箭头函数，为什么接受参数？
使用函数：是利用函数谁调用this就指向谁的特点
接受参数：是利用触发事件系统会默认传递事件源对象，需要接受实参
高阶函数：debounce在js读取页面一开始就主动执行一次，返回我们的一个函数。

• 使用arguments实现 debounce

const debounce = function(fn, delay = 300, timer = null){
  return function () {
    const self = this
    const args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(self, args)//flag1
    }, delay)
  }
}

flag1处：函数的apply方法第二个参数是可以传入 arguments

实现throttle

const throttle = (fn, delay = 60) => {
  let lock = false
  return function (...args) {
    if (lock) return
    fn.apply(this, args)
    lock = true
    setTimeout(() => (lock = false), delay)
  }
}

• 使用arguments实现 throttle

const throttle = function (fn, delay = 60) {
  let lock = false
  return function () {
    if (lock) return
    fn.apply(this, arguments)
    lock = true
    setTimeout(function () {
      lock = false
    }, delay)
  }
}

这个和上面的防抖函数需要考虑的点差不多，这里就不赘述了。

这里再扩展下

• 事件源对象传递方式
  默认最后一个参数传递事件源对象

<input type="button" value="点击" />
document.querySelector('input').addEventListener('click', fn.bind(this, 1, 2, 3),false)
function fn(a, b, c, e) {
  console.log(a, b, c)
  console.log(e)
}

这里扩展下 apply 的第二个参数的用法
apply方法的第二个参数是可以传入伪数组的

function test(a,b){
  console.log(this)
  console.log(a+b)
}
test.apply({},{name:1,0:1,1:1,length:2})//{}  2