Vue全局节流

事件触发后,会先执行一次事件函数,执行之后如果在规定时间间隔内再触发事件,将不出触发函数,超过规定的事件间隔后会再次触发一次,如此往复

在vue中对click添加节流处理

// 节流
const on = Vue.prototype.$on

Vue.prototype.$on = function (event, func) {
  let previous = 0
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      const now = new Date().getTime()
      if (previous + 1000 <= now) {
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, newFunc)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于C++&OPENCV 的全景图像拼接 C++是一种广泛使用的编程语言,它是由Bjarne Stroustrup于1979年在新泽西州美利山贝尔实验室开始设计开发的。C++是C语言的扩展,旨在提供更强大的编程能力,包括面向对象编程和泛型编程的支持。C++支持数据封装、继承和多态等面向对象编程的特性和泛型编程的模板,以及丰富的标准库,提供了大量的数据结构和算法,极大地提高了开发效率。12 C++是一种静态类型的、编译式的、通用的、大小写敏感的编程语言,它综合了高级语言和低级语言的特点。C++的语法与C语言非常相似,但增加了许多面向对象编程的特性,如类、对象、封装、继承和多态等。这使得C++既保持了C语言的低级特性,如直接访问硬件的能力,又提供了高级语言的特性,如数据封装和代码重用。13 C++的应用领域非常广泛,包括但不限于教育、系统开发、游戏开发、嵌入式系统、工业和商业应用、科研和高性能计算等领域。在教育领域,C++因其结构化和面向对象的特性,常被选为计算机科学和工程专业的入门编程语言。在系统开发领域,C++因其高效性和灵活性,经常被作为开发语言。游戏开发领域中,C++由于其高效性和广泛应用,在开发高性能游戏和游戏引擎中扮演着重要角色。在嵌入式系统领域,C++的高效和灵活性使其成为理想选择。此外,C++还广泛应用于桌面应用、Web浏览器、操作系统、编译器、媒体应用程序、数据库引擎、医疗工程和机器人等领域。16 学习C++的关键是理解其核心概念和编程风格,而不是过于深入技术细节。C++支持多种编程风格,每种风格都能有效地保证运行时间效率和空间效率。因此,无论是初学者还是经验丰富的程序员,都可以通过C++来设计和实现新系统或维护旧系统。3
Vue 中使用 Axios 全局节流防抖的方法有很多,以下是其中一种常见的方法: 1. 在 main.js 中,引入 lodash 的 throttle 和 debounce 方法 ```javascript import _ from 'lodash' Vue.prototype.$throttle = _.throttle Vue.prototype.$debounce = _.debounce ``` 2. 在 Vue 实例中,使用 $throttle 或 $debounce 方法包装 Axios 请求方法 ```javascript import axios from 'axios' export default { methods: { // 使用 $throttle 包装 Axios 请求方法,实现全局节流 async $throttleAxios(url, data, config) { return this.$throttle(async () => { try { const response = await axios.post(url, data, config) return response.data } catch (error) { console.error(error) } }, 1000) }, // 使用 $debounce 包装 Axios 请求方法,实现全局防抖 async $debounceAxios(url, data, config) { return this.$debounce(async () => { try { const response = await axios.post(url, data, config) return response.data } catch (error) { console.error(error) } }, 1000) }, }, } ``` 在上述代码中,$throttleAxios 和 $debounceAxios 方法分别使用 $throttle 和 $debounce 方法包装了 Axios 请求方法,实现了全局节流和防抖。其中,$throttleAxios 的节流时间间隔为 1000ms,$debounceAxios 的防抖时间间隔也为 1000ms。 3. 在组件中调用全局节流防抖的 Axios 请求方法 ```javascript export default { methods: { async fetchData() { // 调用 $throttleAxios 方法获取数据 const data = await this.$throttleAxios('/api/data', { page: 1 }) // 调用 $debounceAxios 方法保存数据 await this.$debounceAxios('/api/save', data) }, }, } ``` 在组件中,通过调用 $throttleAxios 和 $debounceAxios 方法,即可实现全局节流防抖的 Axios 请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值