问答

vue搜索节流为什么第一种方法不可以呢,第二种就可以

作者:admin 2021-05-07 我要评论

第一种 watch: { quickSearch(val) { let timer = null if (timer !== null) clearTimeout(timer) timer = setTimeout(() = { this.loading = true this.init() ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

第一种
watch: {

quickSearch(val) {
  let timer = null
  if (timer !== null) clearTimeout(timer)
  timer = setTimeout(() => {
    this.loading = true
    this.init()
  }, 2000)
  // this.$emit('sonParameters', val)
 }
}

第二种
const delay = (function () {
let timer = 0
  return function (callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()

quickSearch(val) {
  delay(() => {
    this.loading = true
    this.init()
  }, 1000)
},
我不太懂其中原理,哪位前辈能给说说
###

你第一种代码有问题 - -这个节流代码做跟不做一样。只是延迟触发时间2秒,timer都是watch重新声明的,根本没有清除到上一次所产生到timeout。2秒连续改变10次状态,只不过是2秒后连续触发十次
vue简单示例

data: {
    timer: null,
    inputText: ''
},
watch: {
    inputText(val) {
        if (this.timer) clearTimeout(this.timer)
        this.timer = setTimeout(() => this.init(), 2000)
    }
},

原因:
第一种每次执行watch时候重新声明了timer。
第二种生效是因为你使用了闭包,内部函数访问timer变量在当前作用域下找不到就提升到外部作用域寻找timer,然后就形成了引用外部timer变量到关系,外部timer就不会被标记清除。所以你每次调用返回的内部函数都是访问第一次闭包产生的timer,所以第二种生效可用

###

你第一种每次调用的时候都重置了timer呀

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue搜索节流为什么第一种方法不可以呢,

    vue搜索节流为什么第一种方法不可以呢,

  • css粘性定位的问题

    css粘性定位的问题

  • 【移动端】h5页面要求兼容各种机型一屏

    【移动端】h5页面要求兼容各种机型一屏

  • react+typescript实现可以在页面随意拖

    react+typescript实现可以在页面随意拖

腾讯云代理商
海外云服务器