Vue.js 如何在Vue2中实现去抖动？

我在Vue模板中有一个简单的输入框，我希望或多或少像这样使用debounce：

但是，

debounce

属性已被禁用。建议中只说：“使用v-on:input+第三方去盎司功能”

如何正确地实施它

我尝试使用lodash、v-on:input和v-model实现它，但我想知道是否可以不使用额外的变量

在模板中：

在脚本中：

数据：函数（）{
返回{
搜索输入：“”，
筛选键：“”
}
},
方法：{
去盎司输入：u.去盎司（函数（）{
this.filterKey=this.searchInput；
}, 500)
}

filterkey随后将在

computed

props中使用

请注意，我在接受答案之前发布了这个答案。不是 对的这只是从解决方案中向前迈出的一步 问题。我编辑了接受的问题，以显示作者的实现和我使用的最终实现

---

根据评论和建议，我对代码做了一些更改：

在模板中：

手稿：

观察：{
searchInput:函数（）{
这个。debounceInput（）；
}
},

设置过滤键的方法保持不变：

方法：{
去盎司输入：u.去盎司（函数（）{
this.filterKey=this.searchInput；
}, 500)
}

这看起来少了一个调用（只有

v-model

，而不是

v-on:input

）。

我使用的是NPM包，实现方式如下：

方法：{
去盎司输入：去盎司（函数（e）{
此.store.dispatch（'updateInput'，e.target.value）
}，config.debouncers.default）
}

使用问题中的示例，实现如下所示：

方法：{
去盎司输入：去盎司（函数（e）{
this.filterKey=e.target.value；
}, 500)
}

在

方法中分配去抖动可能会很麻烦。因此，与此相反：

//坏的
方法：{
foo:u.debounce（函数（）{}，1000）
}

你可以尝试：

//很好
创建（）{
this.foo=u.debounce（函数（）{}，1000）；
}

如果您有一个组件的多个实例，这就成了一个问题-类似于
data
应该是一个返回对象的函数。如果假设每个实例独立运行，则它们需要自己的去盎司函数

下面是一个问题示例：


Vue.component（'counter'{
模板：{{i}}，
数据：函数（）{
返回{i:0}；
},
方法：{
//不要这样做
增量：u.debounce（函数（）{
这个。i+=1；
}, 1000)
}
});
新Vue({
el:“#应用程序”，
挂载（）{
这是.$refs.counter1.increment（）；
这是.$refs.counter2.increment（）；
}
});

两者都应从0更改为1：
如果您需要一种非常简单的方法来实现这一点，我制作了一个（最初是从vuejs提示中派生出来的，它也支持IE），可以在这里找到：

用法：



然后在组件中：


导出默认值{
名称：“示例”，
数据（）{
返回{
延误：1000，
术语：“”，
}
},
观察：{
术语（）{
//在搜索词发布后对其进行处理
log（`Search term已更改为${this.term}`）
}
},
指令：{
去盎司
}
}
我也遇到了同样的问题，这里有一个不使用插件的解决方案

因为
与




我想我可以在
xxxx=$event.target.value

像这样



方法：

debounceSearch（val）{
if（搜索超时）clearTimeout（搜索超时）；
var=这个；
搜索超时=设置超时（函数（）{
即xxxx=val；
}, 400);
},
选项1：可重复使用，无DEP
-建议在项目中多次需要时使用

/helpers.js

导出功能去抖动（fn，延迟）{
var timeoutID=null
返回函数（）{
clearTimeout（超时ID）
var args=参数
var=this
timeoutID=setTimeout（函数（）{
fn.应用（即，args）
}，延误）
}
}

/组件.vue


从“/helpers”导入{debounce}
导出默认值{
数据（）{
返回{
输入：“”，
取消公告输入：“”
}
},
观察：{
输入：去盎司（函数（newVal）{
this.debouncedInput=newVal
}, 500)
}
}



选项2：在组件中，也没有DEP
-建议使用一次或在小型项目中使用

/组件.vue


导出默认值{
数据：{
超时：空，
取消公告输入：“”
},
计算：{
输入：{
得到（）{
返回此.debouncedInput
},
设置（val）{
if（this.timeout）cleartimout（this.timeout）
this.timeout=setTimeout（（）=>{
this.debouncedInput=val
}, 300)
}
}
}
}

非常简单，不含矿粉

handleScroll:function（）{
if（此.timeout）
clearTimeout（this.timeout）；
this.timeout=setTimeout（（）=>{
//你的行动
}，200）；//延迟
}
如果您使用的是Vue，您也可以使用
v.model.lazy
而不是
debounce
，但请记住
v.model.lazy
并不总是有效，因为Vue对自定义组件的限制

对于自定义组件，应使用
：value
和
@change.native

如果您需要使用lodash的
去抖动功能应用动态延迟：

道具：{
延迟：字符串
},
数据：（）=>({
搜索：空
}),
创建（）{
import {debounce} from 'utils-decorators';

class SomeService {

  @debounce(500)
  getData(params) {
  }
}

 public debChannel = debounce((key) => this.remoteMethodChannelName(key), 200)

export default function (callback, delay=300) {
    let timeout = null
    return (...args) => {
        clearTimeout(timeout)
        const context = this
        timeout = setTimeout(() => callback.apply(context, args), delay)
    }
}

export default {
  methods: {
    debounce(func, delay=300) {
      let debounceTimer;
      return function() {
       // console.log("debouncing call..");
        const context = this;
        const args = arguments;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => func.apply(context, args), delay);
        // console.log("..done");
      };
    }
  }
};

<script>
  import debounceMixin from "../mixins/debounceMixin";
  export default {
   mixins: [debounceMixin],
        data() {
            return {
                isUserIdValid: false,
            };
        },
        mounted() {
        this.isUserIdValid = this.debounce(this.checkUserIdValid, 1000);
        },
    methods: {
        isUserIdValid(id){
        // logic
        }
  }
</script>