vue全局添加节流处理

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)
}

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 中使用 Axios 进行请求时,可以通过在 Vue 的原型中设置 Axios 的实例来实现全局节流防抖。 节流和防抖的作用是为了减少请求的发送次数,提高性能。节流是在一定时间内只发送一次请求,而防抖是在最后一次操作后等待一段时间再发送请求。 以下是一个实现全局节流防抖的示例代码: ```javascript import axios from 'axios' import _ from 'lodash' // 设置全局节流时间 const THROTTLE_TIME = 1000 // 设置全局防抖时间 const DEBOUNCE_TIME = 500 // 创建 Axios 实例 const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 10000 }) // 设置请求拦截器 instance.interceptors.request.use( config => { // 在请求发送前进行节流处理 config.throttleCancelToken = _.throttle(cancel => cancel(), THROTTLE_TIME) return config }, error => { return Promise.reject(error) } ) // 设置响应拦截器 instance.interceptors.response.use( response => { return response }, error => { return Promise.reject(error) } ) // 将 Axios 实例设置为 Vue 的原型 Vue.prototype.$http = instance // 在全局混入对象中设置防抖函数 Vue.mixin({ methods: { debounce(fn, wait = DEBOUNCE_TIME) { let timeout = null return function(...args) { if (timeout !== null) { clearTimeout(timeout) } timeout = setTimeout(() => { fn.apply(this, args) }, wait) } } } }) ``` 在这个示例代码中,首先使用 `import` 引入了 Axios 和 Lodash 库。然后创建了一个 Axios 实例,并设置了全局节流时间和全局防抖时间。接下来,在请求拦截器中使用 `throttle` 函数对取消请求函数进行节流处理,以减少请求发送的次数。最后,将 Axios 实例设置为 Vue 的原型,以便在组件中使用。 除此之外,在全局混入对象中还设置了一个 `debounce` 函数,用于在组件中进行防抖处理。这个函数接收一个函数和一个等待时间作为参数,返回一个新的函数,在等待时间内多次调用该函数时,只会执行最后一次调用,并在等待时间结束后执行一次。 这样,在组件中使用 Axios 进行请求时,可以通过调用 `$http` 对象来发送请求,并使用 `debounce` 函数对请求进行防抖处理,以提高性能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值