Question

我想更改按钮以显示进程正在运行的背景但是，当我运行它时，我看到按钮改变了颜色但是在完成查找之后才将旋转图像作为背景应用。我需要做一些不同的事来解决这个问题吗？

               $("#btnFind").button().click(function () {
                    $('#btnFind').toggleClass('loadinggif btnStyle');

                    var filterVal = $('#tags').val();


                    if (filterVal != "") {
                        $('#MainContent_myTable tr:gt(0)').each(function () {
                            $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
                        });
                    }

                    $('#btnFind').toggleClass('loadinggif btnStyle');
                });

Answer 1

.toggleClass函数返回一个延迟对象，您可以使用.promise()访问该对象，然后将函数绑定到它的.done()方法;

$("#btnFind").button().click(function () {

    $("#btnFind").toggleClass('loadinggif btnStyle').promise().done(function() {

        var filterVal = $('#tags').val();

        if (filterVal != "") {
            $('#MainContent_myTable tr:gt(0)').each(function () {
                $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
            });
        }

        $('#btnFind').toggleClass('loadinggif btnStyle');
    });

});

Answer 2

它不会像那样工作，因为浏览器选项卡将像单个线程应用程序一样工作，在任何时候只有一个任务运行，如运行js脚本，重新绘制带有更改的dom等

在这种情况下，单击按钮时，会将一个类添加到按钮，但由于事件处理程序执行未完成，浏览器将没有时间更新dom对UI的更改，以下解决方法尝试为浏览器提供在toggleClass使用setTimeout

后延迟脚本，重新绘制线程执行时间

你需要尝试

$("#btnFind").button().click(function () {
    $('#btnFind').toggleClass('loadinggif btnStyle');

    setTimeout(function){
        var filterVal = $('#tags').val();


        if (filterVal != "") {
            $('#MainContent_myTable tr:gt(0)').each(function () {
                $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
            });
        }

        $('#btnFind').toggleClass('loadinggif btnStyle');
    })
});

toggleclass（）直到函数完成后才切换

2 个答案: