Vuejs - 在输入时，运行一个函数（但有延迟）答案

【问题标题】：Vuejs - On input, run a function (but with a delay)Vuejs - 在输入时，运行一个函数（但有延迟）
【发布时间】：2017-02-28 14:26:09
【问题描述】：

我有一个输入字段，v-on:input 它运行一个名为 activate 的方法，如下所示：

export default: {
    data() {
        return {
            isHidden: true
        }
    },
    methods: {
        activate() {
            this.isHidden = false;
        }
    }
}

isHidden 打开/关闭某个图标（此数据属性是什么并不重要；我只是将其用作示例）。

所以目前，当用户执行input 时，它会立即打开activate 功能。有没有办法通过setTimeout 延迟它？我已尝试执行以下操作，但它不起作用：

methods: {
    setTimeout(function() {
        activate() {
            this.isHidden = false;
        }
    }, 500)
}

【问题讨论】：

输入是什么类型的？对于某些输入，您可能希望 debounce/throttle 在触发 input 事件时运行任何方法。
它只是一个标准的文本输入字段。 Joe Attardi 的回答对我有用，但我也会研究 debounce/throttle。

标签： javascript vuejs2 vue.js

【解决方案1】：

试试这个：

methods: {
  activate() {
    setTimeout(() => this.isHidden = false, 500);
  }
}

【讨论】：

【解决方案2】：

或不带箭头功能：

methods: {
    activate() {
        var that = this;
        setTimeout(function() { that.isHidden = false; }, 500);
    }
}

【讨论】：

不，没有箭头函数你会失去 this.isHidden 的上下文
@Besi 这就是为什么它被分配给that。