JQuery 开关滞后于开关所基于的变量一键（从 PHP 文件中检索时）

Posted 2023-05-08

【中文标题】JQuery 开关滞后于开关所基于的变量一键（从 PHP 文件中检索时）

【英文标题】：JQuery switch lagging one click behind variable the switch is based on (when retrieving from PHP file)

【发布时间】：2020-10-28 20:13:46

【问题描述】：

我有下面的代码，它会在单击箭头时增加一个“周”变量。 然后它使用 week 变量从 php 文件（与该周相关）中检索信息，

“周”变量在第一次点击时更新。 然而，从 PHP 文件中检索到的数据直到第二次单击才会更新，因此数据滞后一周。

 $('#fixtures-right-arrow').on('click', function()  
        
        week++;

        switch (week) 

            case 1:

                $.post("includes/fixture_1_home_lookup.php", 
                home_1_league_position_id:  home_1_league_position_id
                , function (data, status) 
                home_team_1 = data;
                ); 
           
            break;

...

        ;


    $('#fixtures-week').html(week);   

    $('#home-team-1').html(home_team_1);   
  
);

似乎代码在运行 week++ 之前运行了 switch。有没有办法避免这种情况？

（我在每次从 PHP 文件中检索数据的点击事件中都遇到类似的延迟。直到第七次点击才会出现一个访问多个不同 PHP 文件的弹出窗口 - 然后完美显示，所有数据都在地点。

PHP 文件都包含 mysql 查询以从本地托管的数据库中检索数据）。

【问题讨论】：

“似乎代码在运行周++之前运行了 switch” - 不，这是不可能的。

“然后它使用 week 变量从 PHP 文件中检索信息” - 您通过该 POST 请求传递的唯一数据是 home_1_league_position_id: home_1_league_position_id - 那么具体在哪里是现在用的那一周吗？或者你的措辞是什么意思？

根据星期切换到不同的文件。案例 2 是 $.post("includes/fixture_1_home_lookup_wk2.php".

您在这里没有正确处理 AJAX 请求的异步特性。 $('#home-team-1').html(home_team_1); 在你的 AJAX 请求完成之前执行 - 这就是你得到“旧”结果的原因，因为在你的代码中，这仍然是 当前结果。

您不会（同步请求很糟糕，它们会阻塞 UI。）您可以从 AJAX 请求本身的回调函数中更新您的 HTML。 ***.com/questions/14220321/…

【参考方案1】：

下面的代码可以正常工作。

.done 在 AJAX ($.post) 结果返回后更新 HTML。

    $('#fixtures-right-arrow').on('click', function()  
                   
        switch (week) 

            case 1:

        function postFixt1HomeWk1 ()
            return $.post("includes/fixture_1_home_lookup.php", 
                home_1_league_position_id:  home_1_league_position_id
                );
            

            postFixt1HomeWk1().done(function(data)
                home_team_1 = data
                $('#home-team-1').html(home_team_1);   
            );

                
        break;

        ;

以前，AJAX ($post) 请求下的代码在执行 AJAX ($post) 请求之前执行 - 因为 AJAX 会等待堆栈中的所有代码都执行完毕后再执行。

cmets 中提供的链接对于理解这一点非常有用。 https://***.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call.