0

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

               $("#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');
                });
4

2 回答 2

4

该.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');
    });

});
于 2013-09-06T16:15:25.587 回答
1

它不会那样工作，因为浏览器选项卡将像单线程应用程序一样工作，在任何时候都只会运行一个任务，例如运行 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');
    })
});
于 2013-09-06T16:05:57.303 回答