JS防抖和节流进阶版附验证实例

最新推荐文章于 2023-03-12 14:12:08 发布

~，555555

最新推荐文章于 2023-03-12 14:12:08 发布

阅读量343

点赞数

分类专栏：前端学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44717047/article/details/121713577

版权

前端学习专栏收录该内容

84 篇文章 3 订阅

订阅专栏

这篇博客深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，提供了升级版的实现代码。防抖函数确保在一定时间内只执行最后一次回调，而节流则限制了函数的执行频率。文章通过实际的DOM事件监听示例，如输入框按键事件和页面滚动事件，展示了防抖和节流在性能优化上的应用。同时，文章还考虑了this上下文和不同版本的节流实现，包括延时器版本和时间戳版本。

摘要由CSDN通过智能技术生成

在我年轻的时候，写了这样一篇防抖和节流的文章。

极简版JavaScript 节流和防抖

那篇文章，既没有考虑到 dom调用监听器的this指向，也没有考虑其他方法。

因此现在来一个升级版。

防抖

function debounce(callback, time) {
  let timer = null;
  return function (e) {
    // 如果timer存在，则清除定时器
    timer && clearTimeout(timer);
    // 然后重新开始计时
    timer = setTimeout(() => {
      // 这里的this是来自上级作用域的
      callback.call(this, e);
      timer = null; //重置定时器变量，不然上面的timer && clearTimeout(timer)就是无效代码了，不重置的话timer就一直有值
    }, time);
  }
}

验证


<input type="text">

 <script src="./防抖.js"></script>

 <script>

 const input = document.querySelector('input');

  

 input.onkeydown = debounce(function(e){

 console.log(e.keyCode);

 },500)

 </script>

节流

// 延时器版本
// 第一次触发需要等待设定时间才会执行
function throttle(callback, time) {
  let timer = null;
  return function (e) {
    if (!timer) {
      timer = setTimeout(() => {
        callback.call(this, e);
        timer = null;
      }, time);
    }
  }
}
// 时间戳版本
// 第一次触发就会立马执行
function throttle(callback, wait) {
  let start = 0;
  return function (e) {
    // 如果时间间隔大于需要等待的时间
    if (Date.now() - start >= wait) {
      start = Date.now();
      callback.call(this, e);
    }
  }
}

验证

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 body{
 height: 2000px;
 background: linear-gradient(#125,#eae);
 }
 </style>
</head>
<body>
 <script src="./节流.js"></script>
 <script>
 // 绑定滚动事件
 window.addEventListener('scroll',throttle(function(e){
 console.log(Date.now());
 console.log(e);
 },500));
 </script>
</body>
</html>

~，555555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS防抖和节流进阶版附验证实例

在我年轻的时候，写了这样一篇防抖和节流的文章。极简版JavaScript 节流和防抖那篇文章，既没有考虑到 dom调用监听器的this指向，也没有考虑其他方法。因此现在来一个升级版。防抖function debounce(callback, time) { let timer = null; return function (e) { // 如果timer存在，则清除定时器 timer && clearTimeout(timer); // 然后重新开
复制链接

扫一扫