javascript - 停止 javascript 直到 jquery 触发器完成

Question

我有这段代码，我想要的是函数 b 仅在函数 a 完成后运行。问题是:函数 b 不会等到 ajax 完成
我尝试了 -> 完成并回电，但不起作用总是警报 1 然后 3 然后 2 所以任何人都可以帮助我。

注意:这不是真正的代码，它只是其中的示例之一，因为该文件大约有 500 行
在实际代码中，当页面“第一次”加载时，这种情况会发生多次

index.php

<select id="first_select">
    <option value=''>select one</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>
<select id="second_select">
</select>
<div id="result">test</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#first_select").change(function(){
            first=$(this).val();
            $.post("test.php",{first:first},function(result){
                $("#second_select").empty();
                $("#second_select").append(result);
                alert(2);
            });
            alert(1);
        });
        $("#second_select").change(function(){
            second=$(this).val();
            $("#result").text(second);
            alert(3);
        });
        function a(callback){
            $("#first_select").val(1);
            $("#first_select").trigger('change');
            callback();
        }
        function b(){
            $("#second_select").val(4);
            $("#second_select").trigger('change');
        }
        /*$.when( a() ).done(function() {
            b();
        });*/
        /*$.when( a() ).then(function() {
            b();
        });*/
        a(function(){ b();});

    });
</script>

测试.php

<?php
    echo "<option value=''>select one</option>";
    echo "<option value='",$_POST['first']+3,"'>",$_POST['first']+3,'</option>';
    echo "<option value='",$_POST['first']+4,"'>".$_POST['first']+4,'</option>';
?>

我想要的是函数b仅在函数a触发后运行，所以如果它是由用户触发的，它将不会运行

Answer 1

我对你想要实现的目标有点困惑，但我认为这应该可以实现(无论它是什么？!)。 我所做的唯一更改是将回调设置为变量，然后执行它(如果存在)。如果您不希望它在将来的更改中执行，您需要清除此变量，然后将其设置为 null 或其他任何内容(我不知道您是否希望这样做。)

$(document).ready(function(){
        var myCallback;
        $("#first_select").change(function(){
            first=$(this).val();
            $.post("test.php",{first:first},function(result){
                $("#second_select").empty();
                $("#second_select").append(result);
                alert(2);
                // Check if there was a callback set that we want to run.
                if(myCallback){
                   myCallback();
                }
            });
            alert(1);
        });

        $("#second_select").change(function(){
            second=$(this).val();
            $("#result").text(second);
            alert(3);
        });

        function a(callback){
            // Set the callback.
            myCallback = callback;
            $("#first_select").val(1);
            $("#first_select").trigger('change');                
        }

        function b(){
            $("#second_select").val(4);
            $("#second_select").trigger('change');
        }

        a(function(){ b();});

    });