lodash的防抖与节流(cdn引入)

最新推荐文章于 2024-07-23 15:45:06 发布

```陪伴

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Jk200165/article/details/130510149

版权

lodash官网：Lodash 简介 | Lodash中文文档 | Lodash中文网

节流(throttling)：节流是限制函数的调用频率，确保函数在一定时间内最多只执行一次。因此，在处理大量数据时，可以设置一个固定的时间间隔，每隔一段时间再处理一批数据，以减少卡顿和负荷。

防抖(debouncing): 防抖适用于需要等待一定时间后才能执行的操作，例如用户在输入框中输入文字时，需要等待用户停止输入一段时间后才能进行搜索。

直接看代码：

<!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>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">hello world {{num}}
    <div>
      <button @click="btnClick">num++</button>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          num: 0 // 如果需要，还可以添加其他必要的数据属性
        }
      },
      methods: {
        // 节流
        //节流则是限制函数的调用频率，确保函数在一定时间内最多只执行一次。
        //因此，在处理大量数据时，可以设置一个固定的时间间隔，每隔一段时间再处理一批数据，以减少卡顿和负荷。
        handleData: _.throttle(function(data) {
          // 在这里处理bluetoothData数据
          this.num++
          console.log(this.num);
        }, 2000),


        // 防抖 防抖(debouncing)适用于需要等待一定时间后才能执行的操作，
        //例如用户在输入框中输入文字时，需要等待用户停止输入一段时间后才能进行搜索。
        handleData: _.debounce(function(data) {
          // 在这里处理bluetoothData数据
          this.num++
          console.log(this.num);
        }, 2000),

        
        btnClick() {
          this.handleData(this.num)
        },
      },
    })
  </script>
</body>
</html>