JavaScript小面试~节流

最新推荐文章于 2024-10-09 00:58:21 发布

森果源码

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量105

点赞数

分类专栏： JavaScript小面试文章标签： js javascript

本文链接：https://blog.csdn.net/qq_31539817/article/details/118498800

版权

JavaScript小面试专栏收录该内容

2 篇文章 4 订阅

订阅专栏

节流，当用户发出多次请求时，需要对事件进行限制，不要让事件过多触发。场景：在用户浏览页面的时候，用户拼命滚动屏幕时，控制页面滚动的事件会多次触发，会导致网络阻塞或者出现渲染差。此时需要对其进行约束。无论用户如何操作，都忽视用户操作，只有当时间到了之后，监视到用户还在触发事件，才触发事件。

流程：触发事件，执行任务设置时间间隔>>>>在时间间隔内触发则取消任务>>>>在时间间隔后触发事件>>>则回到第一步。

我们设置点击事件，用户点击次数过多的时候，会导致事件触发过多，我们使用节流来实现在规定时间后才能再次触发事件：

<!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>
        #text{
            height: 200px;
            width: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id='text' ></div>
</body>
<script>
    function colors(){
        let a =Math.floor(Math.random()*255);
        let b =Math.floor(Math.random()*255);
        let c =Math.floor(Math.random()*255);
        document.getElementById('text').style.background=`rgb(${a},${b},${c})`
    }
  function throttle(func,timers){
      let timer
      return ()=>{
          if(timer){
              return;
          }
      timer=setTimeout(()=>{
            func()
            timer=null
          },timers)
      }
  }
    document.getElementById('text').addEventListener('click',throttle(colors,2000))
</script>
</html>

代码的核心思想：当点击第一次事件触发时，timer为null，执行定时器，在这两秒内事件再次被触发，timer有值，则走if内，不执行函数，两秒后触发点击事件，timer已被清空，则执行定时器内的函数，再次清空timer，以此往复执行。。。。。

节流的核心思想：在规定时间内只会执行一次，