Заблокировать функцию JavaScript

Question

У меня есть функция JavaScript, как показано ниже.

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

Эта функция вызывается в нескольких местах на странице. Иногда, в цикле. Важно, чтобы элементы были добавлены в DOM в том порядке, в котором вызывается функция changeTheDom.

Я изначально попытался добавить 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(), который добавляет вашей функции в очереди и гарантирует, что она будет выполняться только тогда, когда все остальное в очереди будет завершено.