Question

我想在与服务器端调用交互时显示正在进行的gif，但我发现它很难，因为浏览器似乎在ajax调用期间被冻结，并且进度图像仅在ajax调用返回后显示。< / p>

我有一个示例js fiddle here

我尝试用js小提琴回声模拟服务器端调用，让我知道是否有更好的方法来做到这一点。另外在AJAX请求中只是为了引入一些延迟，我有一个for循环运行。

HTML代码

    <ul id="basket-result" data-bind="foreach: model">
    <li>
         <h3 data-bind="text: week"></h3>

        <div data-bind="foreach: games">
            <div data-bind="text: url"></div>
        </div>
    </li>
</ul>
<button data-bind="click: buttons.load">Load</button>
<img src="http://www.bis.org/img/uploading.gif" alt="uploading" data-bind="visible: isProcessing">

JS代码

    var getJSONString = function () {
    var result;
    $.ajax({
        async: false,
        url: "/echo/json/",
        data: dataMain,
        type: "POST",
        success: function (msg) {
            result = msg;
        }
    });
    console.log(result);
    console.log('Before TimeOut');
    var x = "delayIt";
    for (var tempi = 0; tempi < 5000000; tempi++) {
        x = x + tempi;
    };
    console.log('After TimeOut');
    return result;
}

var viewModel = {
    model: ko.observable(),
    isProcessing: ko.observable(false),
    buttons: {
        load: function () {
            viewModel.isProcessing(true);
            viewModel.model(getJSONString());
            console.log('what is in view model :' + viewModel.model())
            viewModel.isProcessing(false);
        }
    }
}

$(function () {
    ko.applyBindings(viewModel);
});

要查看正在运行的进度图像，只需注释该行＆＃34; viewModel.isProcessing（false）;＆＃34;在viewmodel.buttons.load函数中。

提前致谢

Answer 1

它冻结了，因为那是你告诉你的ajax调用你做的事情，async: false，你告诉你的ajax调用停止一切直到它完成，只需删除该行，然后如果你想为了让用户知道它何时保存在您的服务器中，您可以使用以下内容：

var vm = {
isLoading: ko.observable(false),
loadData: function () {
    var self = this;
    self.isLoading(true);
    $.getJSON("/echo/json?json={}&delay=2")
        .success(function () {
        // success!
    })
        .complete(function () {
            // always remove the loading, regardless of load/failure
        self.isLoading(false);
    });
}
};

ko.applyBindings(vm);

http://jsfiddle.net/wiredprairie/Uq8VJ/

source

淘汰InProcess图像

1 个答案: