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

本文介绍了JavaScript中的防抖(debounce)和节流(throttle)技术,阐述了两者的区别,并通过实例展示了如何实现。防抖用于限制函数在特定时间内只执行一次,而节流则确保函数以固定频率执行。文中提供了scroll、mousemove和click事件的测试示例,同时讲解了在实现防抖和节流时需要注意的this指向、事件源对象获取以及高阶函数的应用。此外,还讨论了事件源对象的传递方式和apply方法的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

防抖节流

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

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

  • 定义

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

书写时需要考虑的三个问题 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值