Question

我的项目中有以下要求，页面加载后，我必须对Web服务进行异步调用（使用jquery），这需要大约1到5秒的时间来执行。同一页面中有一个下一个按钮，当用户在此调用完成之前单击下一个按钮时，页面导航应保持不变。 BTW我的项目适用于IE 8版本。

与此同时，同一页面上还发生了另一个第三方电话。这与上述ajax调用并行触发，等待时间约为2秒。

所以我以这样一种方式编写逻辑：当用户点击下一个按钮时，它将首先验证2秒等待时间，然后等待5秒钟以完成ajax调用。如果ajax调用在不到5秒（例如1或2秒）内完成，则跳过剩余的等待时间，用户将导航到下一页。

以下是我的代码

<script type="text/javascript">

    var callStatus = "Pending";       // Initially ajax call status will be pending
    var holdNavigation = true;                      // Initially this will be true
    var debug = false;

    // Set debug value only if it is set int web.config
    <% #if DEBUG %>
    debug = true;
    <% #endif %>

    function CallAsyncMethod() {
        // Only make the call if the flag is set in page load
        if ($("#<%= hiddenMakeAsyncCall.ClientID %>").val() == "true") {
            Log("async call started.");
            $.ajax({
                type: "GET",
                url: "WebService.asmx/DoSomething",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function (response) {
                    Log("async call completed with status - " + response.d.Status);
                    callStatus = response.d.Status;
                    holdNavigation = false;
                },
                error: function (xhr, textStatus, errorThrown) {
                    Log("async call failed.")
                    callStatus = "Error";
                    holdNavigation = false;
                    Log(errorThrown);
                }
            });
        }
        else {
            holdNavigation = false;
            callStatus = "NotRequired";
        }
    }

    var delayInterval = 500;
    var timeElapsed = 0;
    var simulateNextButtonClick = false;

    // Next button validation function
    function ValidateNextButtonClick() {
        if (!IsThirdPartyCallWaitingTimeCompleted() || (holdNavigation && !IsAsyncCallCompleted())) {
            if (timeElapsed == delayInterval * 10) {
                holdNavigation = false;
                Log("async call timed out.");
            }
            else {
                Log("Time elapsed after next button click is " + timeElapsed + " milliseconds.");
                timeElapsed += delayInterval;
                setTimeout(ValidateNextButtonClick, delayInterval);
                simulateNextButtonClick = true;
                return false;
            }
        }

        if (simulateNextButtonClick) {
            simulateNextButtonClick = false;
            Log("Simulating the next button click as it was cancelled previously.");
            $("#<%= nextButton.ClientID %>").click();
        }

        Log("Navigating to next page.");
        return true;
    }

    // Waiting time for third party call to complete is 2 seconds,
    // check whether 2 seconds is completed or not.
    function IsThirdPartyCallWaitingTimeCompleted() {
        var afterThirdPartyCallLoadedTime = (new Date().valueOf() - thirdPartyCallLoadedTime) / 1000;

        if (afterThirdPartyCallLoadedTime >= 2) {
            Log("Third party calls completed.");
            return true;
        }

        Log("Waiting for third party calls to complete.");
        return false;
    }

    // Check whether the async call is pending or not
    function IsAsyncCallCompleted() {
        if (callStatus == "Pending") {
            Log("Waiting for async call to complete.");
            return false;
        }
        else if (callStatus == "NotRequired") {
            Log("async call is not required.");
            return true;
        }

        Log("async call completed.");
        return true;
    }

    // Logs the message into console if the debug flag is set to true
    function Log(message) {
        if (debug) {
            $('#log').append(message + "<br/>");
            //window.console.log(message);
        }
    }
</script>

代码

        </p>
        <asp:Button ID="nextButton" runat="server" Text="Next" OnClick="nextButton_Click" OnClientClick="return ValidateNextButtonClick()" />
        <br />
        some third party calls happen here
        <script type="text/javascript">
            var thirdPartyCallLoadedTime = new Date().valueOf();
        </script>

        <asp:HiddenField ID="hiddenMakeAsyncCall" runat="server" Value="true" />
    </div>
</form>
<script type="text/javascript">
    CallAsyncMethod();
</script>

当我在新应用程序中测试时，此代码正常工作，但在我尝试项目时它无法正常工作。它只有在我打开IE中的开发人员工具窗口时才有效。当我调试时发现间隔和timeelapsed的变量自动更改为NaN

请帮我解决这个问题。如果有更好的方法来实现我所做的事情，也请告诉我。

Javascript变量值自动更改为NaN，我的脚本失败

0 个答案: