Javascript 无序执行-不涉及Ajax

我在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));

$（this）.parents（'dd'）。同胞（'dd'）。each（function（）{
var filter_name=$（this.attr（'data-filter-type'）；
if（$（this）.hasClass（'selected'））{
$（this）.removeClass（'选定'，函数（））{
if（$（this）.hasClass（'date'））{
$（'form[name=“filter form”]input[name=“from”]）。remove（）；
$（'form[name=“filter form”]input[name=“to”]”）。remove（）；
}否则{
$（'form[name=“filter form”]输入[name=“”+filter_name+“]”）。删除（）；
}
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（$（过滤器输入）.length>0）{
$（筛选输入）.val（筛选值）；
}否则{
$（'form[name=“filter form”]”）。追加（“”）；
}
doStuff（$（本））；

在我的控制台中，我先看到doStuff的结果，然后再看到调试

---

有人知道如何让函数调用等待吗？

我会将所有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
})

---

有一个重载

.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));

$（this）.parents（'dd'）。同胞（'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（）；
}否则{
$（'form[name=“filter form”]输入[name=“”+filter_name+“]”）。删除（）；
}
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（$（过滤器输入）.length>0）{
$（筛选输入）.val（筛选值）；
}否则{
$（'form[name=“filter form”]”）。追加（“”）；
}
doStuff（$（本））；

浏览器可以根据需要自由延迟渲染。你不能强迫任何东西出现在屏幕上。您只能确保浏览器知道它的外观。我认为您没有正确使用

removeClass

。您提供的函数应该返回一个要删除的类名字符串。@AndrewHitaker抱歉，这也是让浏览器等待DOM更新后再继续的另一次尝试。在许多情况下，用匿名函数包装东西似乎是可行的。同时，我想忽略我的疏忽是安全的，因为代码的这一部分仍然正常运行（也就是说，我将删除它）。天哪，moly@AndrewHitaker，我不知道我在那里做了什么，但你刚刚搞定了。以前是无序执行的，所以我做了这个-解开它，现在是有序执行。谢谢你！（你应该提交你的答案，这样我就可以给你投票了）@DawgUK:很乐意帮忙！