Question

我有一个搜索系统，但我不想要按钮搜索，相反，我希望当用户停止写入时，等待三秒钟然后执行搜索。

另一种方法是每次用户按一个键，执行搜索，但是，这个想法太慢了。我的数据存储在json文件中，因此，搜索包含两个嵌套的forEach。如果再次按下用户键并再次调用搜索方法，如何停止搜索执行？

我使用角度。

Answer 1

我有这样的输入

<input type="text" ng-model="search" ng-model-options="{ updateOn: 'default blur', debounce: { default: 3000, blur: 0 } }">

并在控制器中

$scope.$watch('search', function() {
      // this will be called 3000ms after user stops writing
      // or whenever user clicks out of input so it loses focus
});

Answer 2

我建议300毫秒比3秒好。尝试像

这样的东西

<input ng-keyup="debouncedSubmit()" ng-model="myModel" />

在你的控制器中，注入$ timeout和$ scope：

var timerPromise;
$scope.debouncedSubmit = function(){
   if (timerPromise) {
     $timeout.cancel(timerPromise);
   }
   timerPromise = $timeout(function(){
     // now submit for real
     submit();
   }, 300);
}

你可以更优雅地完成它，使用一些函数式编程并编写去抖和提交，但我觉得它超出了这个问题的范围。

Answer 3

您可以使用$ .debounce方法来延迟搜索方法的执行。在你的情况下是这样的。

function searchFn(event) {

// Perform an search on $(this).val();

};

$('input:text').keyup( $.debounce( 3000, searchFn) );

javascript和输入，知道什么时候停止写

3 个答案: