javascript - 让 knockout 立即生效？

Question

我的页面的一部分绑定(bind)到了 Knockout Viewmodel。当我单击链接时，它会加载一些数据并将其显示在稍远的位置。我想在它消失时显示一些加载图像并加载数据，然后在完成时隐藏它。我有以下代码(精简以显示重要部分)。 Ajax 调用不是异步的，对于其他人正在使用的其他代码，它被设置为 false，因此我无法更改它。问题是“self.Loading(false)”在ajax调用完成之前不会被触发，所以它似乎根本没有显示出来。如果我将 ajax 调用切换为异步，它就会按预期工作。所以我想知道为什么 Ajax 调用会阻止可观察值更改，因为它是在它之前调用的，它不应该立即触发吗？有没有办法强制它立即触发。

HTML:

<a data-bind="click: GetInfo" href="javascript:;">
     <img data-bind="visible: Loading" src="myimg.jpg" alt="Loading" />
</a>

击倒:

 self.Loading = ko.observable(false);
 self.GetInfo = function () {
    self.Loading(true);
    AjaxCall().done(function (data){
       self.Loading(false);
    }
 };

Answer 1

可观察对象和 DOM 可能会立即更新，但您看不到它，因为浏览器可能没有抽出时间来绘制屏幕。该请求正在阻止重绘，因为......它是非异步的。这就是您不应该发出非异步请求的确切原因。

作为一种解决方法，您可以尝试使用 setTimeout 强制事件循环旋转一次，超时时间为 0，以便在可观察到的更改后运行可怕的同步请求，但严肃地说，只需修复您的请求异步。当您的代码阻塞时，不保证浏览器会执行任何操作(包括运行任何加载动画)。