javascript - 如何在 JavaScript 中保持以下异步模式 DRY？

Question

基本模式是如果 X 异步执行某些操作，则其他执行同步操作。例如

if (varNotSet) {
    setVarAsynchronously(function(callback) {
        // process callback then...
        render(page, {'var': myVar});
    });
}
else
    render(page, {'var': myVar});

困扰我的是以下

render(page, {var: myVar});

因为重复相同的代码。有什么方法可以将逻辑封装在一个地方吗？

Answer 1

Sure, use another function.

function resolve() {
    render(page, {'var': myVar});
}

if (varNotSet) {
    setVarAsynchronously(result) {
        // process result then...
        resolve();
    }
}
else resolve();

Answer 2

如果您使用的是 jQuery，我强烈推荐它的内置 $.Deferred 函数，该函数在 sincs 版本 1.5 中可用，它正是为了帮助解决您编写的问题。

使用 jQuery，您可以通过以下方式执行此操作：

var def = new $.Deferred;
var promise = def.promise();
if (varNotSet) {
    setVarAsynchronously(function(callback) {
        def.resolve();
    });
}
else
    def.resolve();

promise.done(function () {
    render(page, {'var': myVar});
});

如果延迟对象的承诺已经解决，它的回调会立即运行，否则它会在解决时运行。稍后您可以使用 .done() 将更多回调附加到 Promise，如果延迟对象已解决，所有这些回调将立即被调用。（您不必从 deferred 对象中创建一个 promise 对象来进行回调，它只是一个可选的东西，它允许您将设置 deferred 的状态与能够添加回调侦听器分开。否则您可以在 deferred 上做所有事情目的。

Answer 3

这样做的完全通用方法可能是这样的辅助函数：

// helper function
function runWhenVal(val, asynchFn, fn) {
    if (!val) {
        asynchFn(function(callback) {
            fn();
        });
    } else {
        fn();
    }
}

// using the helper function
runWhenVal(x, setVarAsychronously, function() {
    render(page, {'var': myVar});
});