Question

我在javascript中遇到了一些无序执行，并且它与任何ajax调用等无关。代码的主要部分是一个可能很慢的DOM操作，然后是方法调用。在每种情况下，在DOM操作完成之前都会触发函数调用。

这是我的代码：

$(this).parents('dd').siblings('dd').each(function(){
  var filter_name = $(this).attr('data-filter-type');
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected', function(){
      if ($(this).hasClass('date')) {
        $('form[name="filter-form"] input[name="from"]').remove();
        $('form[name="filter-form"] input[name="to"]').remove();
      } else {
        $('form[name="filter-form"] input[name="' + filter_name + '"]').remove();
      }
      console.log('removed');
    });
  }
});

var filter_type = $(this).parents('dd').attr('data-filter-type');
var filter_input = 'form[name="filter-form"] input[name="' + filter_type + '"]';
if ($(filter_input).length > 0) {
  $(filter_input).val(filter_value);
} else {
  $('form[name="filter-form"]').append('<input type="hidden" name="' + filter_type + '" value="true">');
}

doStuff($(this));

在我的控制台中，在看到调试之前，我看到了doStuff的结果。

任何人都有任何想法如何使函数调用等待？

Answer 1

有一个.removeClass的重载需要一个函数，但它不是一个回调函数（该操作是同步完成的）。我建议删除函数参数removeClass并在调用后立即放置代码：

$(this).parents('dd').siblings('dd').each(function(){
    var filter_name = $(this).attr('data-filter-type');
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        if ($(this).hasClass('date')) {
            $('form[name="filter-form"] input[name="from"]').remove();
            $('form[name="filter-form"] input[name="to"]').remove();
        } else {
            $('form[name="filter-form"] input[name="' + filter_name + '"]').remove();
        }
        console.log('removed');
    }
});

var filter_type = $(this).parents('dd').attr('data-filter-type');
var filter_input = 'form[name="filter-form"] input[name="' + filter_type + '"]';

if ($(filter_input).length > 0) {
    $(filter_input).val(filter_value);
} else {
    $('form[name="filter-form"]').append('<input type="hidden" name="' + filter_type + '" value="true">');
}

doStuff($(this));

Answer 2

我会将所有DOM操作包装成一个接受回调作为参数的函数：

var manipulateDOM = function(callback){
...
if(typeof callback === "function")callback();
}

并将其称为：

manipulateDOM(function(){
   doStuff(param);//I am not sure about the context so you need to figure out the value of param
})

乱序执行 - 不涉及Ajax

2 个答案: