时间戳

首页 > 解决方案 > 如何处理缓慢的 jQuery addClass 效果？

javascript - 如何处理缓慢的 jQuery addClass 效果？

问题描述

我正在做一个页码的分页列表供用户选择页面。当用户单击任何页面时，它将首先运行 ajax 请求，然后加载数据以呈现页面。然后jQuery.addClass运行以显示当前处于活动状态的页码，方法是添加“活动”类 - addClass('active')。

问题是jQuery.addClass效果有时但不是每次都有效（addClass只是没有将类添加到所选元素）。我认为这是因为 DOM 加载得太快，jQuery 跟不上。即使我使用setTimeout它有时仍然无法正常工作。我该如何处理？


$(() => {

    //Moving page number and
    //Set Active for moving page number
    $(document).on("click", "a.btn-pagination", function(event){
        $('#page_loading').css('display', ''); //--> display the page loading gif
        var num = $(this).attr('data-page');

        $('#result_container').load(base_url+'store/movePage/'
        + $(this).attr('data-page'));

        setTimeout( () => {
            updateButton();
            $('.btn-pagination[data-page = ' + num + ']').show().addClass('active');
        }, 300);

        setTimeout( () => {
            $('#page_loading').css('display', 'none'); //--> hide the page loading gif
        }, 400);
    });

});

function updateButton(){
    let dateValue = $('#currentdate').text().trim();


    if(dateValue >= maxdt){
        $('#next_btn').html('<a class="btn-disable" style="color: gray;">Newer <i class="ace-icon fa fa-arrow-right"></i></a>');
    }
    else {
        $('#next_btn').html('<a href="#" onclick="nextDate()">Newer <i class="ace-icon fa fa-arrow-right"></i></a>');
    }

    if(dateValue <= mindt){
        $('#previous_btn').html('<a class="btn-disable" style="color: gray;"><i class="ace-icon fa fa-arrow-left"></i> Older</a>');
    }
    else {
        $('#previous_btn').html('<a href="#" onclick="prevDate()"><i class="ace-icon fa fa-arrow-left"></i> Older</a>');
    }
}

标签： javascriptjquery

解决方案

使用异步操作时最好使用回调，因为它们确保回调在异步操作完成之前不会运行。

取而代之的是，

$('#result_container').load(base_url+'store/movePage/'
        + $(this).attr('data-page'));

使用回调作为负载的一部分

$('#result_container').load(base_url+'store/movePage/'
        + $(this).attr('data-page'), function(){
  updateButton();
  $('.btn-pagination[data-page = ' + num + ']').show().addClass('active');
});

然后删除这个：

            updateButton();
            $('.btn-pagination[data-page = ' + num + ']').show().addClass('active');
        }, 300);

推荐阅读