javascript - 为什么我的异常没有被捕获？

Question

我正在编写一个 jQuery 插件，允许用户添加对他们文章的引用。基本上，当用户专注于引用输入时按下回车键时，脚本会通过我的 AJAX 脚本检查 URL 以确保它是一个有效的 URL。如果它有效，则会将一个按钮添加到用户可以看到的引用列表中。它还将更新隐藏的输入，其中包含以逗号分隔的 URL 列表。

我对 JS 异常的概念很陌生...我目前收到一条错误消息，提示 Uncaught [object Object]. 该错误发生在我抛出变量“info”的地方。有什么想法吗？

(function($){
    $.fn.extend({
        references : function(options) {
            var defaults = {
                sample_div : '#sample-ref',
                remove_button : '#removereference',
                update_div : '#references',
                hidden_input : 'input[name="references"]',
                saved_input : 'input[name="saved-refs"]',
                ajax_url : 'ajax.php',
                search_input : '#reference'
            };        
            var options = $.extend(defaults, options);
            var count = 0;
            function addReferenceBlock(ref_title){
                var replacements = {
                    ref_title : ref_title,
                    ref_url : ref_url
                };
                var block = $(options.sample_div).html();
                $.each(replacements, function(index, value){
                    block.replace(new RegExp('{'+index+'}', 'g'), value);
               });
               $(options.update_div).append(block);
            }
            function checkReference(url){
                var postData = 'reference='+url;
                $.ajax(
                {
                    dataType: "xml",
                    type: "POST",
                    data : postData,
                    cache: false,
                    url: options.ajax_url
                })
                .done(function(xml, textStatus, jqXHR){
                    if(textStatus === 'success'){
                        $(xml).find('success').each(function(){     
                            console.log('checking '+url+'...');
                            var info = $(this).find('pagetitle');
                            throw info;
                        });
                        $(xml).find('error').each(function(){
                            throw false;
                            console.log($(this).find('message').text());
                        });
                    } else {
                        console.log(jqXHR);
                    }
                });
            }
            function init(element, options){
                $(options.search_input).enterKey(function(e){
                    try {
                        checkReference($(options.search_input).val());
                    } catch($status){
                        if($status !== false){
                            addReferenceBlock($status);
                            updateReferenceInput($(options.search_input).val());
                        } else {
                            alert($status);
                        }
                    }
                    e.preventDefault();
                });
            }
            return $(this).each(function(){ init(this, options); });
        }
    });
})(jQuery);

Answer 1

您的try block 调用checkReference 函数。您的 checkReference 函数调用 done。 done 确实不 调用抛出错误的匿名函数；它设置了一个事件处理程序，以便稍后系统可以调用它。因此，您的堆栈跟踪不是您想象的那样。

编辑

Why does "done" not call the code inside of it?

因为如果这样做了，它就不是异步的了。让我们用 setTimeout 而不是 AJAX 来模拟这个，同样的原则适用:

function foo(how) {
  throw("In foo " + how + " (look at the stack trace by clicking on the triangle)");
}

function callFooAsynchronously() {
  console.log("calling foo asynchronously");
  setTimeout(function() {
    foo("asynchronously");
  }, 1000);
  console.log("finished calling foo asynchronously");
}

function callFooSynchronously() {
  console.log("calling foo synchronously");
  foo("synchronously");
  console.log("finished calling foo synchronously");
}

function main() {
  callFooAsynchronously();
  callFooSynchronously();
}

main();

输出如下:

calling foo asynchronously js:18
finished calling foo asynchronously js:22
calling foo synchronously js:26
Uncaught In foo synchronously (look at the stack trace by clicking on the triangle) js:14
  foo js:14
  callFooSynchronously js:27
  main js:34
  (anonymous function) js:37
Uncaught In foo asynchronously (look at the stack trace by clicking on the triangle) js:14
  foo js:14
  (anonymous function)

同步调用将开始，然后抛出异常。由于异常，永远不会显示“完成同步调用 foo”。堆栈跟踪显示来自片段执行环境的调用，调用 main，调用 callFooSynchronously，最终调用 foo。

异步调用将显示开始消息，附加超时处理程序，然后显示完成消息，然后退出。 callFooAsynchronously 到此结束。一秒钟后，浏览器会记住它需要做的事情，这反射(reflect)在堆栈跟踪中:运行传递给 setTimeout 的匿名函数，进而运行 foo。注意 main 和 callFooAsynchronously 不是堆栈跟踪的一部分:它们设置了警报，然后离开了建筑物。 callFooAsynchronously，尽管它的名称，从不调用 foo，setTimeout 也不调用。

浏览器直接调用setTimeout中的匿名函数，就像它直接调用XMLHttpRequest上的onreadystatechange函数一样(最终调用您传递给 done 的函数，已附加，但未被 jQuery.ajax 调用。

如果 done 调用你的函数，它会在你调用 ajax 后立即执行，而不是在响应到达时执行，因为那是 done 被执行。