jQuery異步觸發2個觸發事件

Question

我有2個需要異步觸發的事件，因為第二個事件依賴於第一個事件。

目前我有：

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

這是2個事件：

    $('#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事件（在“內部ClearAll事件...”之后顯示“正在設置num_holes”警報）。

我們非常感謝您對此異步啟動的任何幫助。 我不想使用SetTimeout（），因為時間可能會根據用戶的計算機而有所不同。

Answer 1

您可以將change事件函數放入命名函數，並添加將在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);

和

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

Answer 2

您可以在$（“＃CourseID”）。trigger（'change'）事件中將ClearAll觸發器移動到ajax成功回調的末尾嗎？

Answer 3

通過執行以下操作，我得以解決此問題：

$(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中-一切正常。