防抖节流简单实现

薛定谔的量子猫.

已于 2023-02-28 20:05:02 修改

阅读量189

点赞数

文章标签： javascript 前端 css3

于 2023-02-28 20:03:10 首次发布

本文链接：https://blog.csdn.net/Wsnbb007/article/details/129268758

版权

概念:

防抖：事件被触发n秒后再执行回调，n秒内再出触发事件，重新计时，最后一次事件n秒后再执行回调。
节流：单位时间内多次触发事件，只有一次生效。

应用场景：

防抖：
按钮提交，多次提交按钮，只执行最后提交的一次。
服务端验证：表单校验连续输入，搜索联想词功能 lodash.debounce

节流：
拖拽：固定时间只执行一次，防止超高频次触发位置变动。
缩放：监控浏览器resize，resize事件是在窗口或框架的大小被调整时发生。
动画场景：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="ipt">
<input type="button" id="ipt2" value="获取验证码">

  <script>
     /* 防抖 */
    var ipt=document.querySelector('#ipt')
     /* 节流 */
    var ipt2=document.querySelector('#ipt2')
    ipt.addEventListener('input',()=>{
      // console.log(ipt.value,222222);
      dbounce()
    })

    /* 防抖 连续触发走最后一次 */
    var  timeId=null
    function  dbounce(){
      clearTimeout(timeId)
      timeId= setTimeout(()=>{
        console.log(1111);
       },500)
    }

    /* 节流=====单位时间只走第一次 */
    var flag=true
    var  timeId2=null
    ipt2.addEventListener('click',()=>{
      if(!flag){
        return 
      }
      flag=false
      var n=5
      timeId2= setInterval(() => {
        n-=1

        if(n<1){
          /* 表示时间走完 */
          ipt2.value='获取验证码'
          flag=true
          n=5
          clearInterval(timeId2)
        }else{
          /* 时间还没有走完 */
          ipt2.value=n+'s之后在获取验证码'
        }
      }, 1000);
    })

console.log(Object.prototype.toString.call(2));
  </script>
</body>
</html>