jquery addClassが正しい順序で適用されていません

Question

私の例では、すぐにクリックするとクラスbusyが本文に追加されます。これにより、背景が赤くなります。私はその後、各ループが完了した後にこのクラスを削除します。

実際に起こっているのは、ループが完了してすぐに削除されると、クラスbusyが追加されているということです。ループ内でremoveClassという条件を削除した場合、クラスbusyが追加され、追加されたままになっているため、これが当てはまると思います。理由はわかりません。私はこの問題に1時間以上立ち往生し、完全な停止状態にあります。

フィドルの例では、列をクリックします3.

フィドルhttps://jsfiddle.net/2nvopbqo/3/

$(".sort").click(function() { 
    $('body').addClass('busy'); 
    var col = $(this).parent().children().index($(this)); 
    var desc = $(this).hasClass('desc'); 
    var date = $(this).hasClass('date'); 
    sortTable(desc, col, date); 
    $(this).toggleClass("desc asc"); 
}); 

function sortTable(order, col, date) { 
    var rows = $('#mytable tbody tr').get(); 

    rows.sort(function(a, b) { 

    var A = $(a).children('td').eq(col).text().toUpperCase(); 
    var B = $(b).children('td').eq(col).text().toUpperCase(); 

    if (date) { 
     var A = A.split("-").reverse().join('-'); 
     var B = B.split("-").reverse().join('-'); 
    } 

    if (order) { 
     if (B < A) return -1; 
     if (B > A) return 1; 
    } else { 
     if (A < B) return -1; 
     if (A > B) return 1; 
    } 

    return 0; 
    }); 

    var totalRows = rows.length; 


    $.each(rows, function(index, row) { 
    $('#mytable').children('tbody').append(row); 

    if (index == totalRows - 1) $('body').removeClass('busy'); 
    }); 
} 

Answer 1

あなたのコードは、それがに起動する前に、クラスの原因を追加することを更新された状態を表示できるようにするために戻ってブラウザに与えることはありませんクラスを削除し、削除します。メインのJavaScriptコードは、UIを更新するためにも使用されるスレッドで実行されます（これはいくつかの理由で重要です）。

クラスのエフェクトを表示させたい場合は、持続時間が0または非常に小さいsetTimeoutのブラウザに戻って戻ってください（ターゲットブラウザでテストすると、〜40msを機会にFirefoxの）：

$(".sort").click(function() { 
    $('body').addClass('busy'); 
    var $this = $(this); 
    setTimeout(function() { 
    var col = $this.parent().children().index($(this)); 
    var desc = $this.hasClass('desc'); 
    var date = $this.hasClass('date'); 
    sortTable(desc, col, date); 
    $this.toggleClass("desc asc"); 
    }, 40); 
}); 

Updated Fiddle（私は答えにそのHTMLのすべてを入れている方法はありませんので）。

Answer 2

再描画を強制するすべての変更は、現在の機能が完了した後にのみ適用されます。クリックハンドラは、.busyタグを追加して削除するため、変更は行われません。並べ替え呼び出しを 'async'にするとこれが解決されます。

$(".sort").click(function() { 
    $('body').addClass('busy'); 
    var col = $(this).parent().children().index($(this)); 
    var desc = $(this).hasClass('desc'); 
    var date = $(this).hasClass('date'); 
    //will fire after the click handler is done. 
    setTimeout(sortTable,0,desc, col, date); 
    // you could also use requestAnimationFrame 
    $(this).toggleClass("desc asc"); 
});