Vue学习---vue 防抖处理函数,是处理什么场景

丈剑走天涯2024-07-24 9:17

Vue防抖处理函数是用来处理在快速连续操作中，只执行最后一次操作的情况。

例如，在输入框输入时，我们可能希望只在用户完成输入后进行处理，而不是在每次键入时都处理。(n秒后触发一次)

以下是一个简单的Vue防抖处理函数的例子：

javascript 复制代码

<template>
  <input v-model="inputValue" @input="debouncedInput">
</template>
 
<script>
export default {
      data() {
            return {
              inputValue: ''
            };
      },
      methods: {
            debouncedInput: debounce(function() {
              // 在这里处理输入值
              console.log('Input value:', this.inputValue);
            }, 500)
      }
};
 
function debounce(func, wait) {
      let timeout;
      return function() {
            const context = this, args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(() => {
              func.apply(context, args);
            }, wait);
      };
}
</script>

创建一个全局预置防抖的事件处理器：

javascript 复制代码

export default {
      created() {
            // 每个实例都有了自己的预置防抖的处理函数
            this.debouncedClick = _.debounce(this.click, 500)
      },
      unmounted() {
            // 最好是在组件卸载时
            // 清除掉防抖计时器
            this.debouncedClick.cancel()
      },
  methods: {
        click() {
          // ... 对点击的响应 ...
        }
  }
}