在 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 数组绑定到 UI，它显示一个输入标签列表。

我添加了一个微调器以在 Ajax 调用开始时显示活动，并在 Ajax 调用结束时停止旋转。 问题是，如果我获得大量数据 (+100)，淘汰赛需要很长时间才能更新 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);
});

这将一次推送所有值。如果你不这样做，那么每次你推送一个值而不是当数组完全更新时，都会通知 observable 的订阅者。

至于你在 UI 更新后做事的问题，我没有找到任何干净的方法。以下是我过去为解决此问题所做的工作：

$('.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。