如何使用延迟vue js发送数据？答案

【问题标题】：How to send data with delay vue js?如何使用延迟vue js发送数据？
【发布时间】：2019-10-04 18:04:41
【问题描述】：

每次我使用 input 时，我的函数都会将数据发送到服务器并得到响应，但是如果我想在字段 'name' 中写入 - Thomas Edison，我会逐信发送

我尝试使用 setTimeout 函数，如果用户仍在编写字符串，则不会发送任何内容，但我不起作用

 @input="throttledSave"

  throttledSave (e) {
                let eva = e 
                let DELAY = 2000;
                if(e.target.value){
                    return this.throttle(this.setDataFinalJSON, DELAY, eva);
                }
            },

     throttle: function (callback, limit,eva) {
            var wait = false;
            var typingTimer;
            return function (callback, limit,eva) {
                clearTimeout(typingTimer)
                if (!wait) {
                    callback(eva);
                    wait = true;
                    typingTimer = setTimeout(function () {
                        console.log('oh again')
                        wait = false;
                    }, limit);
                }
            }
        }

每次它一直工作到 DELAY，我不知道为什么，也许 clearTimeout 不起作用，我被卡住了。我不知道为什么如果我写一些文本这么快我得到了 console.log('oh again')

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以使用 lodash debounce (https://lodash.com/docs/4.17.15#debounce) 方法来做到这一点：

创建一个去抖函数，延迟调用 func 直到之后等待自上次去抖动后经过的毫秒数函数被调用。 debounced 函数带有取消取消延迟函数调用的方法和刷新方法立即调用它们。提供选项来指示是否 func 应该在等待的前沿和/或后沿调用超时。使用提供给去抖功能。对去抖动函数的后续调用返回最后一次 func 调用的结果。

_.debounce(func, [wait=0], [options={}])

例子：

methods: {
    throttledMethod: _.debounce(() => {
      console.log('I only get fired once every two seconds, max!')
    }, 2000)
  }

最好使用 lodash 的 vue 变体：https://www.npmjs.com/package/vue-lodash

【讨论】：

【解决方案2】：

超时只是延迟每个输入事件（这样每个输入事件都会在一段时间后引起请求），这不是您想要的。实现这一点的基本思想很简单：将最后一个输入事件的时间存储在模型中，并在输入时，仅在超时已过时发送您的请求，例如：

data () {
    return {
        ...
        lastInputTime: null,
        inputTimeout: 1000 // ms
    }
},
...
methods: {
    throttledSave (e) {
        const attemptTime = new Date();
        if(this.lastInputTime && attemptTime - this.lastInputTime > this.inputTimeout) {
            // get value, send request etc
        }
        this.lastInputTime = attemptTime;
    }

嗯，这正是所谓的 debounce，dreijntjens 提出了类似的建议，但使用了一个允许装饰你的函数的库。

PS 实际上，这样的装饰是一种更好的方法（除非您计划在运行时更改 inputTimeout），因为您不会用特定于去抖动的额外内容来弄乱您的模型；如果您的项目没有正确地摇树库，您可以制作自己的“装饰器”（不是严格意义上的，装饰器应该有special syntax，而不是一个获取您的函数并返回修改后的函数） .像这样的：

function debounce(func, timeout) {
    let lastTime = null;
    return function() {
        const attemptTime = new Date();
        if(lastTime && attemptTime - lastTime > timeout) {
            func.apply(this, arguments);
        }
        lastTime = attemptTime;
    }
}

lodash 的实现更多的是sophisticated，因为它支持多个options。

【讨论】：

我不是真的想要做，但看起来它在这里工作完美jsfiddle.net/ZYXp4/8 正是我想要的，但我不知道，为什么我的代码中有不同的输出
@Bravis 好吧，在那个 sn-p 中，您正在更新 DOM，这是一个同步操作，因此它可能会执行不同的操作，但这是一个很好的问题，为什么它会像您想要的那样工作

【解决方案3】：

使用惰性输入模型修饰符怎么样？

VueJS prototype for delayed (lazy) input

Vue.prototype.lazyInput = function(e, delay) {
    const self = this;
    if (typeof delay == 'undefined') {
        delay = 500;
    }
    const target = e.target;
    if (self.lazyTimer) {
        clearTimeout(self.lazyTimer);
        self.lazyTimer = null;
    }
    self.lazyTimer = setTimeout(function(){
        target.dispatchEvent(new Event('change'));
    }, delay);
}

用法：

<input v-model.lazy="{variableName}" @input="lazyInput($event)">

【讨论】：

【解决方案4】：

你总是可以使用原生的 setTimeout()

methods: {
   search: function (event) {
       clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
          ... XMLHttpRequest ... 
       }, 2000)

如果没有新数据，则每 2000 毫秒发送一次请求。

【讨论】：