实现防抖与节流

最新推荐文章于 2025-06-13 20:56:05 发布

橙子爱打卡

最新推荐文章于 2025-06-13 20:56:05 发布

阅读量174

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/lchzh1225019998/article/details/127446563

版权

本文介绍了如何使用HTML和JavaScript实现防抖与节流技术。通过示例代码展示了在按钮点击事件中应用防抖和节流函数，以控制事件处理函数的执行频率，提高页面性能。

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

一、HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖与节流</title>
</head>
<body>
<input type="button" id="debounce" value="防抖"/>
<input type="button" id="throttle" value="节流"/>
</body>
<script src="index.js"></script>
</html>

二、index.js部分

// 防抖
  function fangdou(fn,times = 1000){
    let time = null;
    return function(){
      clearTimeout(time);
      time = setTimeout(function(){
        fn.apply(this,arguments);
      },times);
    }
  }

  function hi(){
    console.log('防抖成功！');
  }

  let fd = document.getElementById('debounce');
  fd.addEventListener('click', fangdou(hi));

  // 节流
  function jieliu(fn, times = 1000){
    let run = true;
    return function(){
      if(!run){
        return ;
      }
      run = false;
      setTimeout(function(){
        fn.apply(this,arguments);
        run = true;
      },times)
    }
  }

  function hello(){
    console.log('节流成功！')
  }

  let jl = document.getElementById('throttle');
  jl.addEventListener('click', jieliu(hello));