javascript - 為什麼js程式碼後面報錯，會導致前面的程式碼執行不了，我確定後面的部分和前面的部分沒有邏輯上的關聯。

Question

最近在用野狗雲端即時通訊引擎做一個todo應用程式。
大致就是，前面有一個函數在監聽雲端資料的變化，並將雲端資料同步到本地端。所以每次刷新瀏覽器，頁面上的資料都會正常顯示。

後面有一個實現刪除便籤功能的函數，這兩個函數之間邏輯相互獨立，後面的函數對前面並不會造成影響。
但是有一次刪除便籤功能的函數有語句出錯了，再刷新頁面就無法正常顯示便籤了。
不是說js是一條一條執行的嗎，為什麼在我這個程式裡會有這種情況發生。

#

var task_list = new Array();
var i =0;
//野狗云初始化
var config = {
  syncURL: "https://mytodo123.wilddogio.com" //输入节点 URL
};
wilddog.initializeApp(config);
var ref = wilddog.sync().ref();

//绑定键盘回车键
$(document).keydown(function(event){   
    if(event.which == 13)
    {
        $("#btn1").click();
    }
});


/*点击submit时，将数据先添加到野狗云*/
$("#btn1").click(function(){
    var content=$("#ipt1").val();
    if(content != ""){
    ref.child("note").push(content);  
    $("#ipt1").val("");
    }
});    
/*监听云端数据变化*/
    ref.child("note").on("child_added",function(snapshot){
        var list = $('#task-list');
        content = snapshot.val();
        var textObj = '<p class="task-item">\
                        <input type="checkbox" />\
                        <span class="ui-icon ui-icon-clock"></span>\
                        <span class="task-content">'+content+'</span>\
                        <span class="task-detail">detail</span>\
                        </p>';
        list.prepend(textObj);
    });

//删除便签
$("#btn2").click(function(){
    $("input[type='checkbox']:checked").each(function(){
        var delObj = $(this).parents("p.task-item")
        delObj.remove();
    });
});

Answer 1

簡單說，JS執行前首先要對整個程式碼區塊（js檔案或script標籤）做語法分析（parsing），你這Uncaught SyntaxError: Unexpected token說明連語法這步都過不了，整個程式碼區塊都不能執行了。

你可以看這文章，改變不是說js是一條一條執行的嗎這種看法。

Answer 2

可以打斷點看看執行順序