javascript - Why does the error reported at the end of the js code cause the previous code to fail to execute? I am sure that the latter part is not logically related to the previous part.

Question

Recently I am using the Wild Dog Cloud real-time communication engine to build a todo application.
Roughly speaking, there is a function in the front that monitors changes in cloud data and synchronizes cloud data to the local. So every time you refresh the browser, the data on the page will be displayed normally.

There is a function at the back that implements the function of deleting notes. The logic between the two functions is independent of each other. The latter function will not affect the previous one.
But once, there was an error in a statement in the function of deleting sticky notes. After refreshing the page, the sticky notes could not be displayed normally.
Isn’t it said that js is executed one by one? Why does this happen in my program?

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

To put it simply, before JS is executed, the entire code block (js file or script tag) must first be parsed. Your Uncaught SyntaxError: Unexpected token means that you cannot even pass the syntax step, and the entire code block cannot Executed.

You can read this article and change Didn’t you say that js is executed one by one? This view.

Answer 2

You can interrupt to see the execution order