Vue 去抖滑块事件

Question

我用Vuetify。在自定义组件中，我有一个 v-slider 发出一个输入事件，然后在 API.

上调用 patch 方法

问题是它在“滑动”时发送大量请求。我要一秒来声讨输入

内部组件：

<v-slider :value="uta.requirements_completed_perc"
                    @input="$emit('patch-uta',[uta.id,'requirements_completed_perc',$event])"
                    max="100"
                    min="0"
          ></v-slider>

捕捉事件：

@patch-uta="patchUTA(...$event)"

打补丁的方法：

methods:{
        patchUTA(_id, field, val) {
            let self = this;
            var payload = {}
            payload[field] = val ? val : false;
            dx.patchUTA(payload, _id).then(resp => {
                self.showSuccessNotification();
            })
        },
        ... }

如何用underscore_.debounce的方式进行声讨？或者我可以谴责事件发射吗？

Answer 1

你可以这样试试

methods: {
  patchUTA: _.debounce((_id, field, val) => {
            const payload = {}
            payload[field] = val ? val : false;
            dx.patchUTA(payload, _id).then(resp => {
                this.showSuccessNotification();
            })
        }, 500) // delay = 500
}

Vue 去抖滑块事件

Vue debounce slider event

javascript

vue.js

vuetify.js

debounce