我可以去抖或节流观看的<输入>吗?在 AngularJS 中使用 _lodash? [英] Can I debounce or throttle a watched &lt;input&gt; in AngularJS using _lodash?

问题描述

我有以下内容对绑定到 $scope.id 的 <input> 字段进行监视.每次输入字段值更改时，监视函数都会执行:

$scope.$watch("id", function (id) {//基于 $scope.id 做某事的代码});

有什么办法可以设置超时或使用 _lodash 消除抖动，以便代码当用户更改值时，不会在每次按键时执行.

我想要的是一个延迟一秒钟，以便在用户停止输入一秒钟后手表内的代码块运行.请注意，输入值可以随时更改.例如，如果值为1"或10"或1000"，我需要调用该函数.这类似于 Google 中带有建议的搜索框的工作方式.如果用户输入 999，那么我需要调用该函数.如果他删除了一个 9 所以它是 99 那么我需要调用这个函数.

我确实有 _lodash 可用，因此使用的解决方案可能最适合我的需求.

解决方案

这就是您要找的吗?

$scope.$watch("id", _.debounce(function (id) {//基于 $scope.id 做某事的代码//此代码将在上次id"更改后 1 秒后调用.}, 1000));

但是请注意，如果您想在该函数内更改 $scope，您应该将它包裹起来 $scope.$apply(...) 除非 _.debounce> 函数在内部使用 $timeout (据我所知它不会这样做)Angular 不会知道您在 $scope 上所做的更改.

更新

至于更新的问题 - 是的，您需要用

包装整个回调函数体

$scope.$apply():

$scope.$watch("id", _.debounce(function (id) {//此代码将在上次id"更改后 1 秒后调用.$scope.$apply(function(){//基于 $scope.id 做某事的代码})}, 1000));

I have the following which does a watch on an <input> field that's bound to $scope.id. Every time the input field value changes the watch function gets executed:

$scope.$watch("id", function (id) {

   // code that does something based on $scope.id

});

Is there a way I can put a timeout on this or debounce this with _lodash so that the code does not execute on each keypress while the user is changing the value.

What I would like is for a delay of one second so that after the user has stopped typing for one second then the code block inside the watch runs. Note that the input value is something that could change at any time. For example I need the function to be called if the value is "1" or "10" or "1000". This is something similar to the way the search box with suggestions works in Google. If the user types in 999 then I need the function to be called. If he deletes a 9 so it's 99 then I need the function to be called.

I do have _lodash available so a solution that uses that might be the best fit for my needs.

解决方案

Is that what are you looking for?

$scope.$watch("id", _.debounce(function (id) {
    // Code that does something based on $scope.id
    // This code will be invoked after 1 second from the last time 'id' has changed.
}, 1000));

Note, however, that if you want to change $scope inside that function you should wrap it $scope.$apply(...) as unless _.debounce function uses $timeout internally (which as far as I understand it doesn't do) Angular will not be aware of the changes you did on the $scope.

UPDATE

As to the updated question - yes you need to wrap the entire callback function body with

$scope.$apply():

$scope.$watch("id", _.debounce(function (id) {
    // This code will be invoked after 1 second from the last time 'id' has changed.
    $scope.$apply(function(){
        // Code that does something based on $scope.id
    })
}, 1000));

这篇关于我可以去抖或节流观看的<输入>吗?在 AngularJS 中使用 _lodash?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！