节流笔记啊

LL_wjj

于 2022-06-22 14:43:27 发布

阅读量90

点赞数

分类专栏： VUE 前端

本文链接：https://blog.youkuaiyun.com/wajueju/article/details/125409010

版权

JavaScript 节流函数性能优化事件处理

关键词由优快云通过智能技术生成

前端同时被 2 个专栏收录

17 篇文章

订阅专栏

VUE

2 篇文章

订阅专栏

11.节流

1、定义：

当持续触发事件的时候，保证一段时间内，只调用一次处理函数。一段事件内，只做一件事

在n秒内多次点击，只有一次生效，只请求一次接口

2、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节流函数</title>
</head>
<body>
    <button id="button">点击</button>
    <script type="text/javascript">


        function thro(func, wait){
          // 在一定时间内，点击多次，一百次，也只执行一次
          let timer
          return function (){
            if (!timer){
              // set 不执行，如果timer有值（说明有正在执行的函数），就不执行了
              timer = setTimeout(function (){
                func()
                // 当本次函数执行完成后，再次点击需要再次触发，所以需要将timer 设置为空
                timer = null
              }, wait)
            }
          }
        }

        function handle(){
          console.log(Math.random());
        }

        // 获取点击事件的
        var btn = document.getElementById('button')
        btn.onclick = thro(handle, 2000)
    </script>
</body>
</html>