输入文本后 5 秒内没有活动时 vuejs 调用函数

Question

我正在尝试做一些类似自动保存的事情，但只有当用户没有在 textarea 中输入任何东西时才需要调用函数，例如 5 秒

<textarea @keyup="test" class="protocol-paragraph" name="" id="" rows="10">{{ somedata }}</textarea>


methods: {
    test(){
        console.log('saving...');
    }
}

我需要设置带有时间戳的自定义计数器还是有一个简单的解决方案？如果我只是设置超时，它会在每次击键 5 秒后调用

Answer 1

lodash .debounce() 方法示例：

new Vue({
  el: '#app',
  data: {
    content: '',
    saved: ''
  },
  methods: {
    autoSave: _.debounce(function () {
      this.saved = this.content
      console.log(this.saved)
    }, 1000)
  }
})

<div id="app">
  <textarea @input="autoSave" v-model="content"></textarea>
</div>

<script src="https://unpkg.com/vue@2.5.9/dist/vue.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.4/lodash.min.js"></script>