javascript - 通过示例了解 javascript 的异步行为

Question

我是 javascript 的新手，我想了解它的异步性质。为此，这里是我的示例代码:

  $("#calculate-similarity").click(function(){

        // assume input is an array whose length is larger than 0
        var requestData={"uris":input,"limit":100};
        client=new Ajax(requestData);
        alert('inside .click function');

    })

Ajax=function(requestData){

    alert('inside ajax');
    $.ajax({
        url: 'http://localhost:8080/',
        type:'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(requestData),
        xhrFields: {
            withCredentials: true
        }
    }).done(function(data) {
        $("#ws-results").children().detach();
        $("#ws-results").append('<table id="my-final-table"><thead><th>fname</th><th>furi</th><th>sname</th><th>suri</th><th>similarity</th></thead><tbody></tbody></table>');
        $('#my-final-table').dynatable({
            dataset: {
                records:data
            }
        });      
    });
}

现在，在上面，我正在创建新的 Ajax() 并在其中发出一个 ajax 请求。据我所知它的异步事件。因此，我认为应该首先完成此请求，然后执行我的其他 javascript 行 (alert('inside .click function'))。换句话说，我希望:

1) alert inside ajax
2) show my datatable on the browser
3) alert inside .click function

但是，我得到了以下命令:

1) alert inside ajax
2) alert inside .click function
3) show table on the browser

那么，您建议我如何理解这些概念？我拥有 C++ 和 Java 等多种编程语言的扎实背景，但这是我第一次接触 Web 开发和 JavaScript。

编辑

如果我像下面这样修改我的 .click 函数，你是说首先总是打印 10000 次 hello 然后显示表格吗？或者表格会显示在日志记录中间的某个地方？我的意思是当响应到来时，引擎应该先等待才能显示它？

修改后的代码:(让我们删除所有警报语句)

$("#calculate-similarity").click(function(){

            // assume input is an array whose length is larger than 0
            var requestData={"uris":input,"limit":100};
            client=new Ajax(requestData);
                for(var z=0;z<10000;z++){
                    console.log(z+'hi!');
                 }

        })

Answer 1

As far as I know its asynch event. Therefore, I though that, this request should be completed first of all, and then my other javascript lines should be executed.

这恰恰与它的意思相反。

Ajax 函数将运行。它将触发 HTTP 请求。 Ajax 函数将完成。 alert 将运行。

在未来的某个时刻，HTTP 响应将到达，done 事件处理程序将触发。

---

这与以下原理完全相同:

alert(1);
$("#calculate-similarity").click(function(){ alert(2); });
alert(3);

JavaScript 不会在触发 alert(3) 之前等待您点击计算相似度。

---

If I modify my .click function like below, do you say first of all always 10000 times hello will be printed out and then table will be shown ? Or table would be shown somewhere at the middle of logging ? I mean when the response comes, engine should wait first in order to show it ?

JavaScript 不会为了执行不同的(事件处理程序)函数而中断正在运行的函数。它会等到不忙时再去寻找事件。