Question

我有这个代码，我想要的是功能b只在功能a完成后运行。问题是：函数b不等到ajax完成
我试过 - ＆gt;完成并回叫，不工作始终警报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>

test.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或者如果您不希望它在将来的更改中执行，则需要执行此操作（我不知道您是否想要这样做。）< / p>

$(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();});

    });

Answer 2

在js中使用信号量：

//
//Simple counting semaphore used at asinc call to test end execution to R&R and BIN
//
function CountingSemaphores()
{
    this._semaphore = 0;
    this.wait = function ()
    {
        this._semaphore--;
    };
    this.signal = function ()
    {
        this._semaphore++;
    };
    this.green = function ()
    {
        this._semaphore = 0;
    }
    this.cross = function ()
    {
        return (this._semaphore >= 0);
    }
}

使用像：

var semaphore = new CountingSemaphores();

验证：

function wait_for_green()
{
    if (!semaphore.cross())
    return false;
    else
    return true;
}
function start_consumming()
{
  //large processing
  semaphore.signal();
}

function main()
{
    semaphore.wait();
    start_consumming()
    while (wait_for_green())
    {
       //delay something 
     }
    //start processing
}

Answer 3

如果你需要链接每个任务，那么应该返回属于当前任务的promise，试试这个：

    $(document).ready(function () {

        var callback = function () {
            console.log(3);
        };

        $("#first_select").change(function () {
            first = $(this).val();
            $.post("/echo/json", {
                first: first
            }).then(function (result) { // alert(2)
                console.log(2);
                $("#second_select").empty();
                /*
                 * Maybe you are missing the following return
                 */
                return $("#second_select").append(result); //then shoud return a promise.
            }).then(function (data) { //alert(3)
                callback();
            });
            console.log(1);
        });

    });

小提琴Here

停止javascript直到jquery触发器完成

3 个答案: