vue2中使用防抖和节流

在Vue2中，可以使用Lodash库提供的`debounce`（防抖）和`throttle`（节流）方法来实现防抖和节流。

1. 防抖

防抖是指在一定时间内，如果事件被触发多次，只执行一次函数。例如，当用户输入关键词进行搜索时，我们希望用户输入完成后再进行搜索，而不是用户每输一个字就进行一次搜索。

使用Lodash库中的`debounce`方法可以实现防抖。该方法接受两个参数，第一个参数是要执行的函数，第二个参数是防抖时间，即在多少毫秒内事件被触发多次只执行一次函数。

示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" @input="debounceSearch" />
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    debounceSearch: debounce(function() {
      console.log('搜索关键词：', this.keyword);
    }, 500),
  },
};
</script>

2. 节流

节流是指在一定时间内，事件只会被触发一次。例如，当我们在滚动页面时，如果每滚动一点页面就触发一次函数，那么可能会导致页面卡顿。此时我们可以使用节流来控制事件的触发次数，让函数在一定时间内只执行一次。

使用Lodash库中的`throttle`方法可以实现节流。该方法接受两个参数，第一个参数是要执行的函数，第二个参数是节流时间，即在多少毫秒内事件只执行一次函数。

示例代码：

<template>
  <div>
    <p>滚动次数：{{ count }}</p>
    <div style="height: 200px; overflow: auto" @scroll="throttleScroll">
      <div style="height: 1000px"></div>
    </div>
  </div>
</template>

<script>
import { throttle } from 'lodash';

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    throttleScroll: throttle(function() {
      this.count++;
    }, 500),
  },
};
</script>