Question

我有一个类似以下的JavaScript函数。

function changeTheDom(var1, var2, var3) {
    // Use DWR to get some server information
    // In the DWR callback, add a element to DOM
}

在页面的几个地方调用此函数。有时，在循环中。将元素按照调用changeTheDom函数的顺序添加到DOM中非常重要。

我最初尝试将DWREngine.setAsync(false);添加到函数的开头，将DWREngine.setAsync(true);添加到函数的末尾。虽然这有效，但它在页面的其余部分引起了极大的疯狂。

所以我想知道是否有办法锁定changeTheDom功能。我找到了this post，但我无法真正遵循else循环或lockingFunction打算如何调用。

任何帮助理解帖子或只是制作锁定程序都将受到赞赏。

Answer 1

不要试图锁定任何东西。最干净的方法始终是适应代码的异步特性。因此，如果您有异步函数，请使用回调。在您的特定情况下，我建议您将函数拆分为在asych调用之前执行的一个部分以及之后执行的一部分：

function changeTheDomBefore(var1, var2, var3) {
    //some code
    //...
    asyncFunction(function(result){
        //this will be executed when the asynchronous function is done
        changeTheDomAfter(var1, var2, var2, result); 
    });
}

function changeTheDomAfter(var1, var2, var3, asynchResult) {
    //more code
    //...
}

asyncFunction是异步函数，在本例中，它接受一个参数 - 回调函数，然后调用第二个changeTheDom函数。

Answer 2

我想我终于得到了你的意思，我决定再创一个答案，希望更有帮助。

要在处理多个异步函数调用时保留顺序，可以编写一个简单的Queue类：

function Queue(){
    var queue = [];
    this.add = function(func, data) {
        queue.push({func:func,data:data});
        if (queue.length === 1) {
            go();
        }
    };
    function go() {
        if (queue.length > 0) {
            var func = queue[0].func,
                data = queue[0].data;

            //example of an async call with callback
            async(function() {
                    func.apply(this, arguments);
                    queue.shift();
                    go();            
            });
        }
    }
};

var queue = new Queue();

function doit(data){
    queue.add(function(result){
        console.log(result);
    }, data);
}


for (var i = 0; i < 10; i++) {
    doit({
        json: JSON.stringify({
            index: i
        }),
        delay: 1 - i / 10.0
    });
}

<强> FIDDLE

因此，每次调用异步函数时，都会调用queue.add()，它会将您的函数添加到队列中，并确保只有在队列中的其他所有内容都完成时才会执行。

锁定JavaScript函数

2 个答案: