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

Question

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

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

Вот те relavant фрагменты кода перед ошибкой:

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(); 
    }); 
} 

Чтобы решить эту проблему, все, что я должен был сделать движение в «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(); 
     }); 
    }); 
}​