js-节流

最新推荐文章于 2024-08-08 20:32:09 发布

醉挽清欢

最新推荐文章于 2024-08-08 20:32:09 发布

阅读量124

点赞数

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_51610980/article/details/127931226

版权

js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

文章目录

节流

节流

什么是节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

源代码（未实现节流）

<!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>
<style>

</style>

<body>
    <div >
       <button class="commit">提交</button>
    </div>
</body>
<script>
        let input=document.querySelector('.commit');
      input.addEventListener('click',function()
      {
        console.log('我出来啦')
      })
</script>

</html>

结果

在这里插入图片描述
当用户不停的按提交按钮时就不停的在提交，服务器就会崩溃。

解决–节流

思想：用一个定时器控制用户提交时间间隔最少为多少，在这个时间内用户只能提交一次。

  let input=document.querySelector('.commit');
    let temp=true;
      input.addEventListener('click',function()
      {
        if(temp)
        {
            console.log('我出来啦');  
            temp=false;
        setTimeout(function()
        {
            temp=true
        },3000)
        } 
        
        
      })