防抖和截流的代码

最新推荐文章于 2024-02-02 13:35:08 发布

鬼谷中妖

最新推荐文章于 2024-02-02 13:35:08 发布

阅读量251

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/a562550212/article/details/123190466

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

名词解释

防抖顾名思义，防止抖动，抬腿一秒钟你抖了100次，那指定是有脑血栓，你要是抬腿后一秒后才抖一次，那才是我们想要的。在一定时间内重复执行某动作，只执行最后一次
截流顾名思义，截断流水的正常状态。有个元素周期表51，一直对你说话，重复的说，搞得你烦死了。这时候，你戴个耳塞，1秒后才听他说的内容，然后又戴上耳塞。这样你听的唠叨的话，就是1秒钟才能听到一次。在一定时间内容重复执行的动作，降低它的执行频次

代码

<!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>
  <style>
    .div1 {
      background-color: red;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .div12 {
      background-color: yellow;
      margin-top: 30px;
    }

    .div2 {
      background-color: blue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <input class="input-throttle" type="text">
  <div class="input-copy_container">
    <div>input的输入值</div>
    <div class="input-copy_text"></div>
  </div>
  <div class="text-cursor"></div>
</body>
<script>
  $body=document.querySelector('body')
  $textCursor=document.querySelector('.text-cursor')
  $inputThrottle=document.querySelector('.input-throttle')
  $inputCopyText=document.querySelector('.input-copy_text')

  // 鼠标的回调
  function mousemoveCallback(e) {
    console.log('clientX,clientY', 'x'+e.clientX+'  y'+e.clientY);
    $textCursor.innerText='x'+e.clientX+'  y'+e.clientY
  }

  // 输入框的回调
  function inputCallback(e) {
    console.log('e :>> ', e.srcElement.value);
    $inputCopyText.textContent=e.srcElement.value
  }

  // 防抖 wait 毫秒，在wait内容执行第二，就取消之前的定时任务
  function debounce(func, wait) {
    let timeId=null;
    return (...args) => {
      if (timeId) {
        clearTimeout(timeId)
      }
      timeId=setTimeout(() => {
        func.apply(this, args)
      }, wait);
    }
  }

  // 截流
  function throttle(func, wait) {
    // 定义一个时间戳，当再次执行该函数时的时间戳，如果小于wait则，清空如果大于则不管
    let timeId=null;
    let prevTime=new Date().getTime();
    let nowTime;
    return (...args) => {
      const nowTime=new Date().getTime()
      if (nowTime-prevTime>wait) {
        prevTime=nowTime
        func.apply(this, args)
      }
    }
  }

  $inputThrottle.addEventListener('input', throttle(inputCallback, 2*1000)) // 输入框测试防抖
    document.addEventListener('mousemove', throttle(mousemoveCallback, 2*1000))   // 鼠标操作测试截流
</script>

</html>

鬼谷中妖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和截流的代码

名词解释防抖顾名思义，防止抖动，抬腿一秒钟你抖了100次，那指定是有脑血栓，你要是抬腿后一秒后才抖一次，那才是我们想要的。在一定时间内重复执行某动作，只执行最后一次截流顾名思义，截断流水的正常状态。有个元素周期表51，一直对你说话，重复的说，搞得你烦死了。这时候，你戴个耳塞，1秒后才听他说的内容，然后又戴上耳塞。这样你听的唠叨的话，就是1秒钟才能听到一次。在一定时间内容重复执行的动作，降低它的执行频次代码<!DOCTYPE html><html lang="en">
复制链接

扫一扫