Javascript jqueryfire2异步触发事件

我有两个事件需要异步触发，因为第二个事件依赖于第一个事件

目前我有：

$(document).ready(function() {
    $("#CourseID").trigger('change');
    $("#ClearAll").trigger('click');
});

以下是两项活动：

    $('#CourseID').change(function() {
alert('Inside CourseID change event');
        Required(document.getElementById('CourseID').value, 'CourseID', 'err_CourseID');
        // Get Hole information & display in Holes
        var CourseID = document.getElementById('CourseID').value;
        document.getElementById('db_CourseID').value = CourseID;
        if(CourseID.length<1) { 
            var holes = document.getElementById('num_holes').value;
            for(i=1; i<=holes; i++) {
                id = "holes_"+i;
                $('#'+id).prop('checked', false);
            }
            document.getElementById('num_holes').value = 0;
            document.getElementById('hole_error').style.display = "inline";
            document.getElementById('holes').style.display = "none";
            document.getElementById('front9').style.display = "none";
            document.getElementById('mid9').style.display = "none";
            document.getElementById('back9').style.display = "none";
            document.getElementById('ClearAll').style.display = "none";
            document.getElementById('SelectAll').style.display = "none";
            chkCheckboxes();
            return; 
        } else {
            document.getElementById('hole_error').style.display = "none";
            document.getElementById('holes').style.display = "inline";
            // Select All Holes
            var holes = document.getElementById('num_holes').value;
            for(i=1; i<=holes; i++) {
                id = "holes_"+i;
                $('#'+id).prop('checked', true);
            }
        }

        $.ajax({
            url: "/P3Live/_includes/php/get_playable_holes.php",
            type: "post",
            dataType: 'json',
            data: {CourseID: CourseID},
            success: function(response) {
                if (response.status == "success") {
                    // We need to clear the existing div so when we append it is doing so to an empty field
                    $('#holes').empty();
                    var str = response.message + ''; /* We add the blank space to assure it is recognized as a string */
                    var holes = str.split(",");
                    var sections = holes.length/9;
alert('Setting num_holes');
                    document.getElementById('num_holes').value = holes.length;
                    for(i=0; i<sections; i++) {
                        for(j=0; j<9; j++) {
                            holeNum = (i*9)+j;
                            if(holes.length<holeNum) { continue; }
                            addCheckbox(holes[holeNum]);
                            id='holes_'+holes[holeNum];
                        }
                        var html = $("#holes").html();
                        html = html + "<br />"; // creates a new line after each section of 9 holes
                        $("#holes").html(html);
                    }
                    // We need to have the entire holes div populated before we can check the boxes
                    for(i=0; i<holes.length; i++) {
                        id='holes_'+holes[i];
                        $("#"+id).prop("checked", true);
                    }
                    chkCheckboxes();
                    // Now let's setup which buttons should be visible
                    switch (sections) {
                        case 0:
                            document.getElementById('front9').style.display = "none";
                            document.getElementById('mid9').style.display = "none";
                            document.getElementById('back9').style.display = "none";
                            document.getElementById('ClearAll').style.display = "none";
                            document.getElementById('SelectAll').style.display = "none";
                            break;
                        case 1:
                            document.getElementById('front9').style.display = "inline";
                            document.getElementById('mid9').style.display = "none";
                            document.getElementById('back9').style.display = "none";
                            document.getElementById('ClearAll').style.display = "inline";
                            document.getElementById('SelectAll').style.display = "inline";
                            break;
                        case 2:
                            document.getElementById('front9').style.display = "inline";
                            document.getElementById('mid9').style.display = "none";
                            document.getElementById('back9').style.display = "inline";
                            document.getElementById('ClearAll').style.display = "inline";
                            document.getElementById('SelectAll').style.display = "inline";
                            break;
                        case 3:
                            document.getElementById('front9').style.display = "inline";
                            document.getElementById('mid9').style.display = "inline";
                            document.getElementById('back9').style.display = "inline";
                            document.getElementById('ClearAll').style.display = "inline";
                            document.getElementById('SelectAll').style.display = "inline";
                            break;

                    }       
                } else {
                    alert(response.message);
                }
            },
            error: function(response) {
                for (var k in response){
                    if (typeof response[k] !== 'function') {
                         console.log("Key is " + k + ", value is " + response[k]);
                    }
                }
            }
        });
    })

此事件从另一个字段获取CourseID，并从数据库中检索有关孔数的信息。然后，它会为每个孔创建复选框，并默认选中它们。它还设置某些按钮的显示状态。其中之一是我想触发的第二个事件

    $("#ClearAll").click(function() {
        var holes = document.getElementById('num_holes').value;
alert('Inside ClearAll Event.  Holes:'+holes);
        for(i=1; i<=holes; i++) {
            id = "holes_"+i;
            $('#'+id).prop('checked', false);
        }
        chkCheckboxes();
    })

如您所见，我插入了警报以查看它们的发射顺序。我的问题是，ClearAll事件是在显示孔复选框之前触发的“Setting num_holes”警报显示在“Inside ClearAll event…”之后

---

如果您能帮助异步启动，我们将不胜感激。我不想使用SetTimeout，因为时间可能因用户的计算机而异。

您可以将更改事件函数放入命名函数中，并添加在ajax之后触发的回调：

function OnChangeEvent(callback) {
    Required(document.getElementById('CourseID').value, 'CourseID', 'err_CourseID');
    ...
    $.ajax({
        url: "/P3Live/_includes/php/get_playable_holes.php",
        type: "post",
        dataType: 'json',
        data: {CourseID: CourseID},
        success: function(response) {
            ...
            if (typeof callback == 'function') {
                callback();
            }
        },
        error: function(response) {
            for (var k in response){
                if (typeof response[k] !== 'function') {
                     console.log("Key is " + k + ", value is " + response[k]);
                }
            }
            if (typeof callback == 'function') {
                callback();
            }
        }
    });
}

您可以调用并将此函数用作：

$('#CourseID').change(OnChangeEvent);

及

---

您能否将ClearAll触发器移动到$CourseID.trigger'change'事件中ajax成功回调的末尾？

我通过执行以下操作解决了此问题：

$(document).ready(function() {
    $("#CourseID").trigger('change'); 
    // Now that the course is displayed and set, let's set the default holes
    // First we will clear all holes
    $(document).ajaxStop(function(){
        // This all needs to be done ONLY after CourseID change event is done
        $("#ClearAll").trigger('click');
        var holes = [];
        holes = "<?php echo $row['holes']; ?>";
        holes = holes.split(",");
        for(i=0; i<holes.length; i++) {
            alert(holes[i]);
            id = "#holes_"+holes[i];
            $(id).prop("checked", true);
        }
    });
});

---

使用.ajaxStop可以确保ajax查询已完成。其余的事情发生得非常快，所以这不是一个问题。然后在.ajaxStop中包含我的第二个函数-一切都按预期进行。

事件不是异步触发的，而是按顺序触发的，但其中一个事件处理程序具有异步代码，在触发事件时，您无法真正解释这一点，您可能必须在第二个事件处理程序中解释这一点，或者找到一个更好的方法来解决这个问题。但是这会在每次更改CourseID时触发click事件，它只需要在init.true上发生。那么回调就是一条路了

$(document).ready(function() {
    $("#CourseID").trigger('change'); 
    // Now that the course is displayed and set, let's set the default holes
    // First we will clear all holes
    $(document).ajaxStop(function(){
        // This all needs to be done ONLY after CourseID change event is done
        $("#ClearAll").trigger('click');
        var holes = [];
        holes = "<?php echo $row['holes']; ?>";
        holes = holes.split(",");
        for(i=0; i<holes.length; i++) {
            alert(holes[i]);
            id = "#holes_"+holes[i];
            $(id).prop("checked", true);
        }
    });
});