0

我正在尝试使用 ajax 将数据发送到服务器，但问题是在发送数据之前我有一个消耗过程。

该过程大约需要 5 秒，并且微调器必须在此过程中运行。

所以在我的代码中，微调器直到 ajax 调用开始才显示（可能是因为进程阻塞了一切）

如果我将调用“消费过程”移动到“发送前”，那么它不起作用，我不知道为什么。

所以问题是如何显示微调器，同时调用所有内容（消费过程和 ajax 调用）

谢谢

这是我的代码：

$("#btnAccept").bind("click", function(event, ui) {
          //start spinner, works fine but only shows after consumingprocess has finished
          $.mobile.loading( 'show' );

             console.log("btnAccept");

     var data =  consmuingprocess();
       console.log(data);
     // data is fine

                                 $.ajax({
                                           type : "POST",
                                           url : url,
                                           dataType : "xml",
                                           contentType : "text/xml;charset=UTF-8",
                                           data : data,
                                           requestHeaders : {
                                            Origin : '*'
                                            },
                                           crossDomain : true,
                                           beforeSend : function(xhr) {
                                            xhr.setRequestHeader("Authorization", "Basic xxxxxxxxxxxxxxx");
                                           console.log("beforeSend");
                                           },
                                           error : errorAJAX,
                                           success : parseXml
                                           });

            });

        });
4

1 回答 1

0

你能做的是

  • 调用你的加载窗口
  • 延迟，因此加载窗口有机会显示
  • 运行其余的代码。

您可以使用间隔来执行此操作：

$("#btnAccept").bind("click", function(event, ui) {
    var intervalId;

    function delayedStuff = function() {

        // make sure we only run this once
        window.clearInterval(intervalId);

        var data =  consmuingprocess();

        $.ajax({
            // set up your ajax request and handlers
        });
    };        

    $.mobile.loading( 'show' );
    // wait 1/2 second, then run delayedStuff
    intervalId = window.setInterval(delayedStuff, 500);
});

但是这种技术有一个重要的警告：当你consumingProcess运行非常昂贵的函数时，所有的动画和 javascript 仍然会停止。在 Chrome 上，即使是动画 gif 也停止运行。我们在这里所做的只是让您的页面更改有机会显示。

有几种可能的解决方案：

  • 仔细看看你的consumingprocess()函数，看看它是否可以优化。可能有一种更快的方法来做你正在做的任何事情，这需要很长时间。
  • 使用WebWorkers。缺点是兼容性：IE 和大多数旧浏览器不支持它。我根本没有用 JavaScript 做过多线程编程，所以我不知道这有多有效。
于 2012-11-08T17:18:51.580 回答