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 ，虽然官方写的是传入个数组，但是类数组 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

猜你喜欢