前端防抖与节流小案例

最新推荐文章于 2024-05-30 15:07:12 发布

MFG_666

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量193

点赞数

文章标签：前端 javascript html5 前端防抖与节流

本文链接：https://blog.csdn.net/m0_49714202/article/details/125019644

版权

区别

防抖是n秒后执行一次
节流是n秒内执行一次

案例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>防抖/节流</title>
</head>

<body>
  <div id="box">
    防抖:<input type="text" placeholder="请输入内容" />

    节流:<button>点击查看控制台</button>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  // 防抖   //  防抖是n秒后执行一次
  
  // (1)
  let timer = null
    $('input').on('input',function(){
        console.log('没有防抖',$('input').val())
        // 向清除一次定时器
        clearTimeout(timer)
        // 重新开启一个定时器
        timer = setTimeout(() => {
            // 如果input输入框的值为空，就终止执行后面的代码
            if(!$('input').val()) return
            console.log('加了防抖后',$(this).val())
        }, 1000);
    })
    
   //(2)
	   // var btn = document.querySelector('button')
	  // var timer = null
	  // btn.onclick = function () {
	  //   // 每次执行把上一次定时器清除，第一次执行也会清除timer
	  //   clearTimeout(timer)
	  //   // 延时 3s 执行
	  //   timer = setTimeout(() => {
	  //     console.log('3s后执行')
	  //   }, 3000)
	  // }


  // 节流     // 节流是n秒内执行一次
  // var btn = document.querySelector('button')
  // // 节流阀 定义了一个开关
  // var flag = true
  // btn.onclick = function () {
  //   // 如果节流阀是开启的，才会执行操作
  //   if (flag) {
  //     // 一旦执行 关闭节流阀
  //     flag = false
  //     console.log('5s后执行')
  //     // 模拟请求
  //     setTimeout(() => {
  //       // 请求成功后，在开启节流阀
  //       flag = true
  //     }, 5000)
  //   }
  // }
</script>

</html>

总结

对于有停顿的高频触发事件建议选择防抖，然而对于高频触发并且连续的事件，选择节流。

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

MFG_666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端防抖与节流小案例

目录区别案例总结最后区别防抖是n秒后执行一次节流是n秒内执行一次案例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>防抖/节流</title></head><body> <div id="box"> 防抖:<input type="text" placeholder="请输入
复制链接

扫一扫