Question

我正在研究一种搜索方法，它在每个键盘中调用ajax，但我希望在我开始输入后500ms后调用它，请建议这样做。

Answer 1

我可以向您推荐lodash及其<select formControlName="person"> <option *ngFor='let person of persons" [ngValue]="person">{{person.firstName+' '+person.lastName}}</option> </select>或throttle功能。

如何使用：

＆＃13;

debounce

＆＃13;

var app = new Vue({
  el: '#app',
  methods: {
    search: _.debounce(
      function() {
        // do your stuff here
        console.log('hey :)');
      },
      500
    )
  }
})

＆＃13;

lodash documentation

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script> <script src="https://unpkg.com/vue@2.2.6"></script> <div id="app"> <input v-on:keyup="search"> <small>(Input here will be written to console with a 500 ms debounce)</small> </div>和throttle之间有什么区别？这是一个非常neat example。

我们目前在我们的search client中使用它，这也是完全用vuejs编写的。

Answer 2

您可以使用debounce中的lodash，示例实现如下：

<input v-on:keyup="debounceInput">

import _ from 'lodash'
....
methods: {
  debounceInput: _.debounce(function (e) {
    //Your code here
  }, 500)
}

在vue.js docs中也建议使用来自lodash的debounce。

你也可以使用debounce NPM包，上面的例子看起来像debounce一样：

<input v-on:keyup="debounceInput">

import debounce from 'debounce'
....

methods: {
  debounceInput: debounce(function (e) {
    //Your code here
  }, 500)
}

如何在500ms后调用vuejs方法

2 个答案:

如何使用：