Question

我有一个搜索栏，数据使用afterkeydown将结果绑定到网格中。但是，绑定发生得太快了。在结果开始填充之前，用户只有一次按键的时间。我有一个Block UI元素，可以在加载结果时阻止与页面的交互，从而在单个字符处停止搜索查询，直到加载结果。是否有我应该使用的另一种方法或一种延长时间的方法，以便可以输入完整的查询？

<input id="search-btn" class="form-control" 
    data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" />

Answer 1

在searchTerm观察点上，您可以添加名为rateLimit的扩展程序。这将在更新值之前添加延迟。

searchTerm = ko.observable(...).extend({ 
    rateLimit: { 
        timeout: 800, method: "notifyWhenChangesStop" 
    },  
});

Reference

Answer 2

您必须像这样包装可观察对象：

function AppViewModel() {
    this.instantaneousValue = ko.observable();
    this.delayedValue = ko.pureComputed(this.instantaneousValue)
        .extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } });
 
    // Keep a log of the throttled values
    this.loggedValues = ko.observableArray([]);
    this.delayedValue.subscribe(function (val) {
        if (val !== '')
            this.loggedValues.push(val);
    }, this);
}

如您所见，延迟值是实际值，将在延迟后进行更新，并且订阅也会在该延迟后触发。您可以在这里参考：https://knockoutjs.com/documentation/rateLimit-observable.html

Knockout.js - valueUpdate：afterkeydown太快了

2 个答案: