javascript - KnockoutJs 中 UI 刷新后是否有回调？

Question

不确定标题是否不言自明，但基本上我有一个邮政编码数组

this.zip_codes = ko.observableArray();

在某些时候，我有一个 ajax 调用，它获取要添加到数组中的邮政编码列表

$('.spin').spin();
$.ajax(url, {
    data: {
        miles_min: 1,
        miles_max: 20
    }
}).done(function(data) {
    ko.utils.arrayForEach(data, function(value) {
        self.zip_codes.push(value);
    });
    $('.spin').spin(false);
});

这个Knockout数组绑定(bind)到UI，它显示输入标签的列表。

我添加了一个旋转器以在 Ajax 调用开始时显示事件，并在 Ajax 调用结束时停止旋转。问题是，如果我获得大量数据(+100)，Knockout 需要很长时间来更新 UI。如何仅在 Knockout 刷新 UI 后而不是在 Ajax 调用后立即停止旋转器？或者是因为我将值推送到数组的方式？

Answer 1

我建议首先进行此更改:

$('.spin').spin();
$.ajax(url, {
    data: {
        miles_min: 1,
        miles_max: 20
    }
}).done(function(data) {
    var tmpArray = [];
    ko.utils.arrayForEach(data, function(value) {
        tmpArray.push(value);
    });
    self.zip_codes(tmpArray);
    $('.spin').spin(false);
});

这将一次性推送所有值。如果您不这样做，则每次推送值时(而不是数组完全更新时)都会通知可观察对象的订阅者。

至于您在用户界面更新后执行操作的问题，我没有找到任何干净的方法。以下是我过去为解决此问题所做的操作:

$('.spin').spin();
$.ajax(url, {
    data: {
        miles_min: 1,
        miles_max: 20
    }
}).done(function(data) {
    var tmpArray = [];
    ko.utils.arrayForEach(data, function(value) {
        tmpArray.push(value);
    });
    self.zip_codes(tmpArray);
    setTimeout(function() {$('.spin').spin(false)}, 0);
});

这似乎让处理器在调用 setTimeout 中的函数之前掌握生成 HTML 的能力。