vue防抖和节流是什么 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue中的防抖（debounce）和节流（throttle）是两种常用的性能优化方法。

防抖是指在进行某个操作时，如果该操作在一定的时间间隔内频繁触发，只有等到指定时间间隔内没有再次触发操作时才进行操作。防抖常用于处理频繁触发的事件，如窗口大小变化、滚动事件等。防抖的实现原理是通过设置一个定时器，在定时器的时间范围内，如果再次触发了相同的操作，则清空之前的定时器，并重新设置一个新的定时器，直到超过指定时间间隔后，才执行该操作。
节流是指在进行某个操作时，如果该操作在一定的时间间隔内频繁触发，只有在指定的时间间隔内执行一次操作。节流常用于处理高频触发的事件，如鼠标移动事件、滚动事件等。节流的实现原理是通过设置一个定时器，在指定的时间间隔内，只执行一次操作，之后再次触发操作时会重新设置定时器，直到超过指定时间间隔后，才执行下一次操作。

应用场景：

防抖常用于处理输入框的实时搜索功能，在用户连续输入时，只有在用户停止输入一段时间后才发送请求。
节流常用于处理滚动加载数据、计算元素位置等场景，可以降低事件触发的频率，减少无谓的计算和请求。

在Vue中，可以通过以下方式实现防抖和节流：

使用Lodash库的debounce和throttle函数，直接引入库文件后使用相应的函数进行处理。
自定义防抖和节流函数，在方法中使用setTimeout或者requestAnimationFrame来实现。

1年前 0条评论

worktile

Worktile官方账号

Vue防抖和节流是为了解决在用户输入或者页面滚动等频繁触发事件时造成的性能问题而采取的一种优化策略。

防抖（Debounce）：
防抖是在事件被触发后延迟一定时间执行回调函数，如果在这个延迟时间内又触发了该事件，则重新计时。这样可以避免一些频繁触发事件时造成的性能问题。常用的场景包括：输入框实时搜索、窗口大小调整、滚动加载等。
例如，在一个输入框中实时搜索，用户每输入一个字母都会触发搜索事件，如果不使用防抖，每输入一个字母都会发送一次请求，造成不必要的性能开销。而使用防抖可以设置一个延迟时间，只有当用户停止输入一段时间后才会触发搜索事件。
节流（Throttle）：
节流是保证在一段时间内只有一次触发事件的执行，也就是规定一个固定的时间间隔，如果在该时间间隔内触发多次事件，只有第一次能执行回调函数，后面的事件被忽略。这样可以有效减少事件的触发次数，降低资源消耗。常用的场景包括：窗口调整、滚动事件等。
例如，在页面滚动时，如果没有对滚动事件进行节流处理，会导致滚动事件频繁触发，造成页面卡顿。而使用节流可以设置一个时间间隔，在该时间间隔内不会重复触发滚动事件，可以有效减少滚动事件的触发次数。
Vue中的防抖和节流：
Vue提供了一种简单的方法来实现防抖和节流，通过使用修饰符来控制事件的触发频率。

.debounce修饰符：在模板内绑定事件时使用v-on指令，并使用debounce修饰符来实现防抖。例如：，这样在按钮被点击后，点击事件会被防抖处理，默认延迟时间是300毫秒。
.throttle修饰符：和防抖类似，在模板内绑定事件时使用v-on指令，并使用throttle修饰符来实现节流。例如：，这样在按钮被点击后，点击事件会被节流处理，默认间隔时间是300毫秒。

如何选择使用防抖和节流：
在实际开发中，根据具体需求和场景来选择使用防抖和节流。

如果需要实时响应用户输入，比如实时搜索，在用户输入过程中需要及时展示搜索结果，可以使用防抖；
如果需要限制事件的触发频率，比如限制滚动事件的触发次数，可以使用节流；
如果需要兼顾实时响应和限制触发频率，在某些场景下可以综合使用防抖和节流。

使用防抖和节流的好处：

提高页面的性能和用户体验，减少不必要的事件触发和处理；
降低网络请求的频率，减少带宽的消耗；
避免重复操作，保证用户操作的正确性；
简化代码实现，减少重复代码，提高代码质量和可维护性。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue.js 是一个用于构建用户界面的 JavaScript 框架。在 Vue.js 的开发过程中，经常会遇到一些需要处理频繁触发的事件，比如窗口滚动、输入框输入等。对于这些事件，如果不做任何处理，可能会导致页面性能下降，甚至造成用户体验不佳。为了解决这个问题，Vue.js 提供了防抖（debounce）和节流（throttle）这两种常用的优化技术。

防抖和节流都是通过控制事件触发的频率来优化代码的执行，减少不必要的计算，从而提高页面的性能。

防抖（debounce）
防抖是指在事件触发后等待一定时间再执行回调函数。如果在这段时间内重新触发了该事件，那之前的定时器会被清除，重新计时。这样可以避免事件的频繁触发。

防抖的应用场景包括但不限于：

搜索框输入自动联想功能，在用户连续输入时，只发送最后一次输入的请求；
窗口大小变化时，重新计算布局，防止频繁触发布局计算；
按钮点击提交表单时，防止连续点击导致多次提交。

下面是一个使用防抖的示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" @input="handleInput" />
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      keyword: '',
      list: []
    }
  },
  methods: {
    // debounce 方法会返回一个新的函数，该函数在触发时会等待指定时间再执行回调
    handleInput: debounce(function() {
      // 发送搜索请求等处理逻辑
    }, 300)
  }
}
</script>

在上面的代码中，使用了 lodash 库中的 debounce 方法来创建一个具有防抖功能的函数 handleInput。每次输入框的值改变时，handleInput 函数都会被触发，但实际上回调函数只会在用户停止输入一段时间后执行。这样可以避免频繁发送搜索请求。

节流（throttle）
节流是指在事件触发后一定时间内只能执行一次回调函数。不管在这段时间内触发了多少次事件，都只会执行一次回调函数。节流可以使得某些事件在一定时间内只触发一次，从而减少计算量。

节流的应用场景包括但不限于：

页面滚动事件，通过节流来限制触发次数，减少性能消耗；
鼠标移动事件，通过防止过多的触发来提升滑动的流畅度；
按钮点击事件，通过节流来限制按钮的点击速度。

下面是一个使用节流的示例代码：

<template>
  <div @scroll="handleScroll"></div>
</template>

<script>
import { throttle } from 'lodash'

export default {
  methods: {
    // throttle 方法会返回一个新的函数，该函数在触发时会限制一定时间内只能执行一次回调
    handleScroll: throttle(function() {
      // 处理滚动事件的逻辑代码
    }, 300)
  }
}
</script>

在上面的代码中，使用了 lodash 库中的 throttle 方法来创建一个具有节流功能的函数 handleScroll。每次滚动事件被触发时，handleScroll 函数都会被执行，但实际上回调函数只会在一定时间间隔内执行一次。这样可以减少滚动事件的处理次数。

总结
防抖和节流是 Vue.js 中常用的优化技术，用于控制频繁触发的事件的执行频率，提高页面性能。防抖是在事件触发后等待一定时间再执行回调函数，节流是在事件触发后一定时间内只能执行一次回调函数。通过使用防抖和节流，可以避免计算量过大，提升用户体验。

1年前 0条评论