Как вы отлаживаете проблемы синхронизации в Javascript?

Question

Недавно я столкнулся со знакомой ошибкой синхронизации javascript / jQuery и потратил слишком много времени на ее отладку.Мне нужен более разумный путь отладки для этой проблемы.

В частности, моя проблема заключалась в том, что пользовательские входные данные должны были вызывать вызов базы данных Mongo, а результаты отправлялись после небольшой математики,на отображаемые выводы.Но отображаемые результаты были безумно неправильными.Однако, как только я добавил точку останова FireBug, проблема ушла.В тот момент я знал, что у меня проблема с синхронизацией, но не как ее решить.

Вот соответствующие фрагменты кода перед ошибкой:

handleDataCallBack : function(transport) {
   var response = $.parseJSON(transport);

   if(!hasErrors) { this.updatePage(response); }
},

accessDatabase : function(){
   var params = { ... };
   DAL.lookupDatabaseInfo(this.handleCallBackOutputPanel, this, params);
},

calculateValues: function() {
   // some numerical values were updated on the page
}

onDomReady : function() {
// ...
   //bind drop-down select change events
   $('#someDropDown').change(function() {
      me.accessDatabase();
      me.calculateValues();
   });
}

Чтобы решить эту проблему, всеМне нужно было переместить метод «возложить значения» из onDomReady внутри обратного вызова:

handleDataCallBack : function(transport) {
   var response = $.parseJSON(transport);

   this.calculateValues();
   if(!hasErrors) { this.updatePage(response); }
},

Проблема заключалась в том, что база данных не ответила до того, как начались вычисления.Конечно, это легко заметить в ретроспективе.Но какие методы я могу использовать для отладки асинхронных проблем синхронизации в javascript / jQuery в будущем?Это кажется далеко за пределами контекста инструментов IDE.И FireBug не помог.Существуют ли инструменты для отслеживания асинхронных проблем веб-разработки?Или, может быть, некоторые проверенные временем методы?

Answer 1

Я предполагаю, что ваша проблема вызвана здесь:

$('#someDropDown').change(function() {
    me.accessDatabase();
    me.calculateValues();
});

эта проблема в том, что ваши расчеты сделаны сразу после звонка. видя, что вызов БД асинхронный, вычисление не ждет его. однако вы можете сделать это с помощью «обратных вызовов». я вижу, вы пытаетесь реализовать это, и да, это правильно. тем не менее, я считаю это более элегантным:

calculateValues: function() {
    // some numerical values were updated on the page
},

//since this is your general callback hander
//you hand over the return data AND the callbackAfter
handleDataCallBack: function(transport, callbackAfter) {
    var response = $.parseJSON(transport);

    //you may need to use apply, im lost in scoping here
    callbackAfter();
    //or
    callbackAfter.apply(scope);

    if (!hasErrors) {
        this.updatePage(response);
    }
},

accessDatabase: function(callbackAfter) {
    var params = {};

    //pass callbackAfter to the function,
    //after this is done, pass it to the handler
    DAL.lookupDatabaseInfo(this.handleCallBackOutputPanel, this, params, callbackAfter);
},

onDomReady: function() {
    $('#someDropDown').change(function() {
        me.accessDatabase(function() {
            //send over what you want done after. 
            //we'll call it "callbackAfter" for easy tracing
            me.calculateValues();
        });
    });
}​