Javascript 如何使用承诺按特定顺序操作DOM对象？

我有一个我认为很简单的问题，但我想不出来。我有以下两行代码：

$(this).addClass('unavailable');
$(this).html('00');

我希望元素（this）在html设置为00之前应用不可用的类。如果在应用该类之前将html设置为00，则00将以非常难看的方式显示。有没有一种方法可以利用JQuery中的承诺来确保第二行不会在第一行之前执行

我曾考虑过使用setTimeout，但这似乎是一个很难解决的问题

编辑：因为你们中的许多人都提到我不应该使用承诺，我在下面包含了完整的功能

此函数用于填充表中的行。行表示一周，表作为一个整体表示日历中的一个月。此日历的特殊之处在于，某些日期无效，需要对其应用.unavailable类，使其不可见。为了保持适当的间距，将00作为一天

$scope.loadMonth（）方法调用此函数五次，每周调用一次。我认为我需要承诺的原因是，当我在月份之间切换时（因此再次调用$scope.loadMonth（）），在应用不可用类之前，零会显示一瞬间

$scope.loadWeek = function(month, week, index) {

    //  error check
    if(week < 1 || week > 5) { console.log("airQualityController.loadWeek(): week parameter must be between 1 and 5 (including 1 and 5).") }
    if(typeof(month) != 'number') { console.log('airQualityController.loadMonth(): parameter month must be a number, was typeof: ' + typeof(month)); }
    if(month < 0 || month > 11) { console.log('airQualityController.loadMonth(): parameter month must range from 0 to 11, value was: ' + month ); }

    var week = $('#week' + week);
    var days = week.children('td');

    days.each(function(i) {

        //  use index parameter (from loadWeek not days.each) to find the correct date
        var date = $scope.dates[index];

        //  reset all CSS classes
        $(this).removeClass();

        if(index >= 0 && index < 90) { 

            //  attach date as an attribute
            $(this).data('date', date.getDate());
            $(this).data('month', date.getMonth());
            $(this).data('dateStr', $scope.dateToStr(date));

            //console.log($(this).data('date'));

            //  append date to the inside of <td>
            $(this).html(date.getDate());

            //  if it's selected give it the selected class
            if($scope.selectedDate === $(this).data('dateStr')) { $(this).addClass('selected'); }

            //  if day is not in the current month, give it gray styling
            if(date.getMonth() != month) { $(this).addClass('gray-date'); }

            //  remove all event listeners
            $(this).off('click');

            //  on click, update the scope's selectedDate variable and add selected CSS class
            $(this).click(function() {

                //  update selected class
                $('.calendar .selected').removeClass('selected');
                $(this).addClass('selected');

                //  update global selectedDate variable
                $scope.selectedDate = $(this).data('dateStr');

                //  if it was a gray date from another month, switch to that month
                if($(this).hasClass('gray-date')) { 
                    var newMonth = Number($(this).data('month'));
                    $scope.loadMonth(newMonth); 
                }

                $scope.updateMap();

            });

        } else {

            //  day is outside the 90 day range and is therefore unavailable
            $(this).addClass('unavailable');
            $(this).html('00');

        }

        index++;

    });

}

$scope.loadWeek=函数（月、周、索引）{
//错误检查
如果（week<1 | | week>5）{console.log（“airQualityController.loadWeek（）：week参数必须介于1和5之间（包括1和5）。”
if（typeof（month）！=“number”）{console.log（'airQualityController.loadMonth（）：参数month必须是一个数字，was typeof:'+typeof（month））；}
如果（month<0 | | month>11）{console.log（'airQualityController.loadMonth（）：参数month必须介于0到11之间，值为：'+month）；}
风险值周=$（“#周”+周）；
var天=周。儿童（“td”）；
天。每个功能（i）{
//使用索引参数（从loadWeek而不是days.each）查找正确的日期
变量日期=$scope.dates[索引]；
//重置所有CSS类
$（this.removeClass（）；
如果（索引>=0&&index<90）{
//将日期附加为属性
$（this.data（'date'，date.getDate（））；
$（this.data（'month'，date.getMonth（））；
$（this.data（'dateStr'，$scope.dateToStr（date））；
//console.log（$（this.data（'date'））；
//将日期附加到
$（this.html（date.getDate（））；
//如果它被选中，给它选择的类
if（$scope.selectedDate===$（this.data（'dateStr'））{$（this.addClass（'selected'）；}
//如果day不在当月，则为其设置灰色样式
if（date.getMonth（）！=month）{$（this.addClass（'gray-date'）；}
//删除所有事件侦听器
$（此）.off（'click'）；
//单击后，更新作用域的selectedDate变量并添加选定的CSS类
$（此）。单击（函数（）{
//更新所选类
$（'.calendar.selected'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
//更新全局selectedDate变量
$scope.selectedDate=$（this.data（'dateStr'）；
//如果是另一个月的灰色日期，则切换到该月
if（$（this.hasClass（'gray-date'））{
var newMonth=Number（$（this）.data（'month'）；
$scope.loadMonth（newMonth）；
}
$scope.updateMap（）；
});
}否则{
//天超出90天范围，因此不可用
$（this.addClass（'unavailable'）；
$（this.html（'00'）；
}
索引++；
});
}

与您的新问题一起修订 这可能是保留旧值的典型问题，旧值在最初显示为新月份时显示。这可能是由于以下原因造成的：

//  reset all CSS classes
$(this).removeClass();

您可以尝试将所有

td

元素设置为空字符串。像这样：

 $(this).html(' ').removeClass();

原始答案

实现这一点的最简单方法是使用

.promise（）

方法。您可以将其直接附加到集合，并使用

.then（）

方法确定操作顺序

从您的样本中：

$(this).addClass('unavailable').promise().then(function(){
    $(this).html('00');  
})

---

这两种方法都不是异步的。。。那么您的问题是什么呢？如果您希望/需要在调用之间指定一个延迟（例如CSS转换完成），您可以这样做：

$（this）.addClass（'unavailable'）.delay（200）.html（'00'）

JaredSmith所说的“你的问题是什么？”是指问题应该描述期望的结果和当前的行为。这两个方法（.addClass和.html）是按顺序执行的。我没有考虑“你的问题是什么”的惯用含义。我不是想挑起冲突，我只是不明白你的代码有什么不起作用或者为什么不起作用，因为你提供的基本代码片段看起来非常合理。