JS防抖函数的实现

最新推荐文章于 2024-02-26 16:03:19 发布

༺༒新版の小胖纸༒༻

最新推荐文章于 2024-02-26 16:03:19 发布

阅读量226

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45309872/article/details/111561278

版权

首先，防抖是面试中的常见问题，而项目中也会有很多地方可以用到。抱着学习的心态写了一个防抖函数，有不足之处，请大佬指教！

定义：多次触发事件时, 只执行一次回调,在事件被触发n秒后执行回调 , 如果在n秒内再次触发则重新计算

总而言之： 防抖的结果是, 事件只会执行一次

代码如下：

<body>
  <input type="text"  id="input">
</body>

<script>
function debounce(fn, delay) {
  console.log(arguments);
  let timer = null
  return function() {
    clearTimeout(timer)   // 每次清除定时器，防止定时器累加
    timer = window.setTimeout(()=>{
      fn.apply(this, arguments)   
    }, delay)
  }
}

let fn = debounce(function(e) {
  console.log('防抖成功', e.target.value);
}, 1000)

document.getElementById('input').addEventListener('input', fn)

</script>

其中， arguments有点不是很明白，顺便写了自己的理解，希望大佬们指正

在函数调用的时候，浏览器每次都会传递进两个隐式参数

函数的上下文对象this
封装实参的对象arguments

function fun(){
  console.log(arguments);
}
fun('tom',[1,2,3],{name:'Janny'});

看到下面打印出来的结果，arguments是有值的，它的值就是我们传递进去的参数，虽然我们没有给fun函数定义形参，但是我们还是可以通过arguments来调用传递给函数fun的实参。
在这里插入图片描述
简单的理解：每个函数都有一个arguments属性，表示函数的实参集合，这里的实参是重点，就是执行函数时实际传入的参数的集合。

此处arguments理解不是很透彻，希望大佬指正

参考文档：https://www.jianshu.com/p/d7ed5ade67a3

༺༒新版の小胖纸༒༻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS防抖函数的实现

首先，防抖是面试中的常见问题，而项目中也会有很多地方可以用到。抱着学习的心态写了一个防抖函数，有不足之处，请大佬指教！定义：多次触发事件时, 只执行一次回调,在事件被触发n秒后执行回调 , 如果在n秒内再次触发则重新计算总而言之：防抖的结果是, 事件只会执行一次代码如下：<body> <input type="text" id="input"></body>function debounce(fn, delay) { console.log
复制链接

扫一扫