JavaScript 计时问题 - 在设置 sessionStorage 值之前关闭窗口

Question

我们正在整合一个 FSSO API，它需要一个弹出窗口供用户登录。在弹出窗口中，我们执行两项任务:

1. 调用服务来填充配置文件值，然后设置页面 根据事件类型(登录或注册)将用户重定向到。

2. 将用户重定向到父窗口中的重定向页面并关闭 FSSO 弹出窗口。

代码:

$(document).ready(function() {
            var nextPage = "index.html",
            storage = window.opener.sessionStorage;

            function setStorage(callback){
                $.ajax({
                    type: "GET",
                    cache: false,
                    dataType: "json",
                    url: "https://someserviceURL/service/profile",
                    success: function(objJSON){
                        //storage.op is set on the parent page when login or reg link is clicked
                        if (storage.op == "login") {
                            storage.firstname = objJSON.firstName;
                            storage.lastname = objJSON.lastName;
                            storage.setItem('loggedIn',JSON.stringify(true));   //Some browsers don't support booleans in sessionStorage
                            nextPage = "dashboard.html";
                        }
                        else if (storage.op == "register") {
                            storage.firstname = objJSON.firstName;
                            storage.lastname = objJSON.lastName;
                            storage.setItem('loggedIn',JSON.stringify(true));
                            nextPage = "options.html";
                        }
                    },
                    error: function( jqXHR,  textStatus,  errorThrown){
                        //display error message
                    }
                });

                callback();
            }

            setStorage(function(){
                if (typeof window.opener != "undefined" && window.opener != null){
                    setTimeout(function(){
                        window.opener.location.href = nextPage;
                        window.close();
                    },3000);
                }
            });

        });

问题: 如果我将超时设置为小于 3000 的任何值，则窗口似乎在我能够设置 sessionStorage 值之前关闭。我只想关闭窗口以响应设置的这些值，而不是任意的时间流逝。我尝试了将超时设置为 0 的技巧，但没有成功，我只尝试了没有超时的回调。

在这里寻找处理此类时序问题的最佳实践，我现在所拥有的感觉很老套。 :)

Answer 1

$.ajax() 的调用是异步的，这意味着脚本的其余部分将在调用完成后立即继续执行，而无需等待调用完成并触发成功或错误处理程序。

这意味着您的名为 callback 的函数正在您的成功处理程序之前执行。它通常可以在 3000 毫秒超时时按预期工作，因为您的 Web 服务通常需要比这更少的时间来完成，因此在这些情况下您的回调将首先执行。正如您所提到的，这不是控制事件顺序的可靠方法。

一种解决方案是将回调作为完整处理程序的一部分执行，如下所示:

$(document).ready(function() {
        var nextPage = "index.html",
        storage = window.opener.sessionStorage;

        function setStorage(callback){
            $.ajax({
                type: "GET",
                cache: false,
                dataType: "json",
                url: "https://someserviceURL/service/profile",
                success: function(objJSON){
                    //storage.op is set on the parent page when login or reg link is clicked
                    if (storage.op == "login") {
                        storage.firstname = objJSON.firstName;
                        storage.lastname = objJSON.lastName;
                        storage.setItem('loggedIn',JSON.stringify(true));   //Some browsers don't support booleans in sessionStorage
                        nextPage = "dashboard.html";
                    }
                    else if (storage.op == "register") {
                        storage.firstname = objJSON.firstName;
                        storage.lastname = objJSON.lastName;
                        storage.setItem('loggedIn',JSON.stringify(true));
                        nextPage = "options.html";
                    }
                },
                error: function( jqXHR,  textStatus,  errorThrown){
                    //display error message
                },
                complete: function( jqXHR,  textStatus){
                    callback();
                }
            });
        }

        setStorage(function(){
            if (typeof window.opener != "undefined" && window.opener != null){
                    window.opener.location.href = nextPage;
                    window.close();
            }
        });
    });

或者，如果您不关心返回的参数，您可以将 callback 直接传递给 complete。请注意，complete 将在成功和错误条件下执行，因此您可能只想在成功处理程序中调用回调，并在出现任何错误时执行其他操作。