混合了sync和async javascript/jquery，并在最后获得了一个成功函数

Mixing sync and async javascript/jquery and getting a success function at the end

本文关键字：获得了 最后 函数 成功 一个 sync async javascript jquery 混合      更新时间：2023-09-26

想知道这个问题的最佳解决方案是什么，而且这不是我实际的代码结构或名称，而是说明这个问题的最简单方法。我有一个函数，它纯粹用于执行ajax调用并用jquery加载模板。

function load(template) {
    $('#container').load(template, data, function() {
       // complete code here
    }); 
}

重点关注$.load（）中的第三个参数，即在请求完成时运行的回调函数。

现在我在另一个包装器函数中有了load（）函数：

function processTask(variable) {
    load(variable);
}

我遇到的问题是，在ajax加载完成后，我需要一些代码来运行，但是，随着我的应用程序的发展，我的包装函数processTask可能会调用ajax load，也可能不会调用，所以我无法在完整的回调中执行我必须要用的代码。

我是更改$.load（）以执行同步操作，还是只是更好地管理我的代码，这样，如果我调用$.load），它会将我需要的代码放在回调中，如果不是，它会把它放在我需要的位置？

我读过关于javascript Promises的文章，我不确定它们在这种情况下是否会有所帮助。

编辑

所以我的processTask是一个对象方法。

function classObj(name, fn) {
    this.name = name;
    this.processTask = fn;
    this.load = function(template) {
        $('#container').load(template, data, function() {
           // complete code here
        });
    }
}

在上下文中，我这样做：

var task = new classObj('taskName', function() {  
    this.load('myFile.php'); 
    // Or another function and not load() based on whats needed in the task. 
});

基本上，我有一个对象，我可以随意添加自定义方法，并且可以很容易地动态调用它们，直到现在它们总是加载一个文件。

首先，更改load函数以从get（或ajax）返回xhr：

function load(template) {
    return $.get('myFile.php', data, function(result) {
       $('#container').html(result);
    }); 
}

然后，在您的代码中，您可以使用when then在加载完成后执行代码（如果适用）：

var xhr;
/* ... */
if(something){
     xhr = load(template);
}
/* ... */
if(xhr){
    $.when(xhr).then(doSomething);
} else {
    doSomething();
}

事实上，这可以通过以下事实来简化：传递给when的非延迟对象（显然包括未定义的对象）将立即执行then并消除if:

$.when(xhr).then(doSomething);

如果xhr未定义，则when将立即解析，导致then立即执行。

相关文章：