javascript - 如何使用 Promise 以特定顺序操作 DOM 对象？

Question

我有一个我认为非常简单的问题，但我无法弄清楚。我有以下两行代码:

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

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

我考虑过使用 setTimeout，但这似乎是一个糟糕的解决方法。

编辑:因为你们中的许多人都提到我不必使用 promise ，所以我在下面包含了完整的功能。

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

该函数由 $scope.loadMonth() 方法调用五次，每周一次。我认为我需要 promise 的原因是因为当我在月份之间切换(因此再次调用 $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++;

    });

}

Answer 1

与您一起修改新问题 这可能是保留旧值的经典问题，该问题在初始显示新月份时显示。这可能是由这一行引起的:

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

您可以尝试将所有 td 元素设置为空字符串。像这样:

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

原始答案

实现此目的的最简单方法是使用 .promise() 方法。您可以将其直接附加到集合并使用 .then() 方法来确定操作的顺序。

来自您的示例:

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