Question

我有以下代码：

$wmdInput.on('keyup', function () {
    var rawContent = $wmdInput.val();
    scope.$apply(function () {
        ngModel.$setViewValue(rawContent);
    });
});

然而，它似乎减慢了我输入的字符。有没有什么方法可以对此进行超时，以便保存所有数据但是它不会比例如每两秒更多一次？

Answer 1

Pure AngularJS方法

var promise;
$wmdInput.on('keyup', function () {
    $timeout.cancel(promise);
    promise = $timeout(function() {
        var rawContent = $wmdInput.val();
        ngModel.$setViewValue(rawContent);
    }, 2000);
});

Answer 2

如果您可以使用lodash（您应该使用），只需将功能包装在_.debounce中：

$wmdInput.on('keyup', _.debounce(function () {
    var rawContent = $wmdInput.val();
    scope.$apply(function () {
        ngModel.$setViewValue(rawContent);
    });
}, 300));

这将导致仅在用户停止键入300毫秒时才调用该函数 - 显然，您应该将wait调整为最适合您的任何内容。

在这种情况下，IMO去抖动比扼杀更合适。

Answer 3

Reactive Extensions for JavaScript可能是您使用的选项。您可以将keyup事件设置为事件源并限制事件。事实上，README有一个看似与你想要的相似的例子......

var $input = $('#input'),
    $results = $('#results');

/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent(input, 'keyup')
    .map(function (e) {
        return e.target.value;
    })
    .filter(function (text) {
        return text.length > 2;
    });

/* Now throttle/debounce the input for 500ms */
var throttled = keyups
     .throttle(500 /* ms */);

/* Now get only distinct values, so we eliminate 
   the arrows and other control characters */
var distinct = throttled
    .distinctUntilChanged();

在您的情况下，您可能不希望filter为length > 2，因此请删除该表达式。无论如何，您可以在最后处理subscribe来处理您的活动

distinct.subscribe(function(value) {
    scope.$apply(function () {
        ngModel.$setViewValue(value);
    });
});

你也有bindings for AngularJS。

Answer 4

在上面的函数中，添加两行：

从wmdInput中删除keyup事件。
设置计时器以将keyup事件添加到 wmdInput 2秒后。

我可以在.on（'keyup'）上放一个计时器以减少更新次数吗？

4 个答案: