jquery fire 2异步触发事件

我有2个事件需要异步触发，因为第二个事件依赖于第一个事件。jquery fire 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 Event ...'之后'设置num_holes'警报显示）。

获得此异步激发的任何帮助将不胜感激。我不想使用SetTimeout（），因为时间可能因用户的计算机而异。

来源

2015-04-22 Charles Wilkins IV

事件不会“异步触发”，它们按顺序触发，但其中一个事件处理程序具有异步代码，并且在触发事件时无法真正解释事件，您可能必须考虑该事件在第二个事件处理程序中，或者找到更好的方法来解决这个问题。 – adeneo

我可以做，以解决这个问题如下：

$(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中包含我的辅助函数 - 一切按预期工作。

来源

2015-04-22 17:23:31

你可以把你改变事件函数为命名的功能，并添加回调阿贾克斯后，将火：

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'); 
    }); 
});

来源

2015-04-22 17:01:42 jcubic

您可以将ClearAll触发器移动到$（“＃CourseID”）内的ajax成功回调的末尾.trigger（'change'）事件？

来源

2015-04-22 17:02:03 Cody

但是这会在每次改变#CourseID时触发点击事件，它只需要在init上发生。 – jcubic

是真的。那么回调就是要走的路 – Cody

jquery fire 2异步触发事件

回答

相关问题