javascript - 您如何调试 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 移动“calculateValues”方法:

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

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

问题是在计算开始之前数据库没有响应。当然，回想起来很容易发现这一点。但是以后可以用什么方法调试javascript/jQuery中的异步时序问题呢？这似乎完全超出了 IDE 工具的范畴。而 FireBug 没有帮助。是否有任何工具可以跟踪异步 Web 开发问题？或者也许是一些耗时考验的方法？

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