JavaScript：在另一个函数调用完成后继续函数

Question

编辑：http://jsfiddle.net/vol7ron/wQZdM/

小提琴应该用来帮助说明我正在尝试做的事情以及正在发生的事情。应使用第二个选项值填充子选择。

---

原问题：

不确定最好的提问方式。我正在创建一个测试脚本来自动填充表单上的输入。

它包括一系列select 下拉框，它们在 onChange 事件中填充其他 select 选项。尝试自动填充表单时，子选择没有任何选项。

console.clear();

// non-select inputs
$(':input:not([type="hidden"],[type="button"])').each(function(){
   $(this).val($(this).attr('name'))          // test value is simple input's name
});

// select inputs
var count=0, cutoff=7500;
$('select').each(function(){
   var t = $(this);
   var c = t.children('option');

   while( c.length <= 1 && count < cutoff){
      count++;
      c = $(this).children('option');       // tried not using the cache'd variable
      if (!(count % 10))
         console.log(count, c.length, "No Options");  // debugging -- never exists early

      setTimeout(function(){},0);           // not really doing anything
   }

   t.val( c.eq(1).val() );                  // set value to second option value
   t.trigger('change');                     // calls the onChange even if it doesnt exist
});

// verify it does have data
console.log($('#sub-select').children('option').length); // does have options

更改事件中有一个 AJAX 调用。我可以修改回调，但这只是一个简单的测试集脚本，从控制台运行。有什么想法吗？

Answer 1

不太确定你的代码要做什么

但回答问题如何在另一个函数调用完成后继续使用函数：-

假设您有一个全部是异步的函数列表，您可以嵌套它们以继续

到下一个异步函数... asyncCall(callback1) { 回调1（回调2）{ 回调2(...) } }

结帐https://github.com/caolan/async 了解一些优雅的方法

此示例按顺序调用所有函数，即使它们是异步的。

async.series([
        function(callback){
            setTimeout(function(){
                call_order.push(1);
                callback(null, 1);
            }, 25);
        },
        function(callback){
            setTimeout(function(){
                call_order.push(2);
                callback(null, 2);
            }, 50);
        },
        function(callback){
            setTimeout(function(){
                call_order.push(3);
                callback(null, 3,3);
            }, 15);
        }

Answer 2

1) 使用同步AJAX请求http://api.jquery.com/jQuery.ajax/

var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

2) 不要使用 .each，而是使用 .eq(index) 并按顺序调用它。

function FakeEach(idx) {
    if(idx >= 7500) return;
    var $obj = $('select').eq(idx);
    if($obj.length == 0) return;
    ...
    $obj.trigger('change');
    window.setTimeout(function() { FakeEach(idx++); }, 0);
}

Answer 3

您的问题是您正在函数中启动 AJAX 请求，并期望响应在函数结束之前到达。只要您使用异步请求，这将永远不会发生。在处理响应的代码可以运行之前，您必须退出您的函数。 Javascript是单线程的，所以只要你的函数在运行，其他代码就不能运行。

解决问题的方法是将使用数据的代码放在响应到达后调用的成功回调函数中。尽管您通常在进行 AJAX 调用的函数中编写该函数，但它是一个稍后会运行的单独函数。

如果您确实需要与 AJAX 调用相同的函数中的数据，则需要发出同步请求。但是，这会影响用户体验，因为整个浏览器在等待响应时会冻结。