Question

遇到一个有趣的问题。我输入我的html（class="day"）时隐藏了一周中的每一天。通过单击Day，它会通过与$.post的AJAX调用展开以显示当天的所有内容。这一切都运作良好。

我认为用户可能想要一次查看整个星期，所以我有一个按钮（id="expander"）来显示所有内容。但是，当我从getSchedule()点击中调用函数#expander时，它会循环除$.post函数中的getSchedule()以外的所有内容。然后它循环遍历$.post。

$(document).ready(function()
{ 
    $('.day').click(function(){
        pass = $(this).prop('id');
        getSchedule(pass);
    });

    $('#expander').click(function(ex){
            $('.day').each(function(index){
                    pass = $(this).prop('id');
                    getSchedule(pass);
            });
            $('#expander').text('Hide All Days');
        ex.preventDefault();
        return false;       
    });
});

function getSchedule(elementid){
            dow = elementid.substr(-1);
            url = "standarddayofweek.php?d="+dow;
            $theday = $("#"+elementid);
            console.log("The day is "+$theday.prop('id'));
            $.post(url,function(data){
                    $theday.children('.dayschedule').html(data);
                }, "html"
            )
    }

我得到的控制台响应是：

The day is d1 
The day is d2
The day is d3 
The day is d4 
The day is d5 
The day is d6
The day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=1"
In the post function, the day is d7
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=2"
In the post function, the day is d7
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=3"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=4"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=5"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=6"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=7"
In the post function, the day is d7

淡化HTML：

<div id="expander">Click me to expand</div>

<div id="d1" class="day">
            <div class="dayschedule"></div>
</div>
<div id="d2" class="day">
            <div class="dayschedule"></div>
</div>

....

<div id="d7" class="day">
            <div class="dayschedule"></div>
</div>

发生了什么事？我试过添加延迟，看看AJAX是否发生得太快，但没有任何改变。

Answer 1

Javascript主要使用单个执行线程运行，请参阅here。这对您的代码意味着什么：

首先关闭.each只是一个循环。想象一下，ajax请求是在for循环中发送的。

for(...)
    $.post();

在当前执行停止之前，ajax回调无法运行。因此，您的代码将遍历所有元素，并按原样进行记录，然后释放线程并且ajax回调可以控制。

您应该更改程序，以便可以返回列表或批量内容，以便只需要多个元素的一个请求。

Answer 2

并非所有浏览器都会同步运行，因此async: false不是一个全面的解决方案。但是，在getSchedule()中本地化变量是。

试试这个：

function getSchedule(elementid) {
    var dow = elementid.substr(-1);
    var url = "standarddayofweek.php?d="+dow;
    var $theday = $("#"+elementid);
    console.log("The day is "+$theday.prop('id'));
    $.post(url, function(data) {
        $theday.children('.dayschedule').html(data);
    }, "html");
}

因此，形成一个包含（正式和非正式）变量的闭包，当它以异步方式触发时，内部函数（ajax成功处理程序）仍然可用，即使外部函数已完成并返回。

Answer 3

JavaScript不是多线程的。在异步事件发生之前，你的函数必须返回。

通过反复调用$.post而不将执行流程返回给浏览器，您实际上正在排队将在代码完成时运行的异步操作。

例如，如果你的代码永远不会永远循环返回，那么你的$.post的 none 就会被调用。

Answer 4

感谢@RobertSmith，答案是从$ .post切换到$ .ajax。我刚刚改变了：

$.post(url,function(data){
                    $theday.children('.dayschedule').html(data);
                }, "html"
            )

到

$.ajax({
    url: url,
    async:false,
    success: function(data) {
     $theday.next().children('.dayschedule').html(data);
    }
});

注意async:false;这就是切换所需要的。

感谢大家的评论！

在完成所有函数调用之前，$ .post不会运行

4 个答案: