Question

我有一些代码在用户点击按钮时执行。我要做的第一件事是隐藏按钮，然后运行一个需要很长时间才能运行的功能。问题是只有在阻塞函数运行后才会隐藏按钮。这里有一个jsFiddle here，这里是代码：

$(document).ready(function () {

    $('#Test').click(function () {

        $(this).hide();
        console.log('button should be hidden');

        LotsOfWork();
    });

});

function LotsOfWork() {

    for (var i = 0; i < 1000000000; i++) {}
}

正如您在小提琴中看到的那样，控制台会显示字符串，但按钮仍然可见，只有在LotsOfWork()完成后才会隐藏。

如何更改此设置以便首先隐藏按钮？

感谢。

Answer 1

这是一个常见问题，当您在浏览器呈现应用于DOM的更改之前调用hide（）时，您必须等待它完成js执行。

一种解决方案是使用setTimeout(myfunc,0);将慢速函数的调用延迟到下一个循环。通过这种方式，浏览器有时间完成js执行，渲染更改并在下一次迭代中执行函数。

    $('#Test').click(function () {

        $(this).hide();
        console.log('button should be hidden');

        setTimeout(LotsOfWork, 0);
    });

另一个解决方案是使用JQuery回调来处理它。

Answer 2

在jquery中使用默认回调它会快速隐藏按钮并在回调函数LotsOfWork

之后

 $(this).hide('fast', function() { LotsOfWork() });

Fiddle

Answer 3

你应该使用.hiddens（）＆＃34;完成＆＃34;选项。在这里，我更新了您的代码...

$(document).ready(function () {
    $('#Test').click(function () {
        $(this).hide({
            complete: function () {
                LotsOfWork();
            }
        });
        console.log('button should be hidden');
    });
});

function LotsOfWork() {
    for (var i = 0; i < 1000000000; i++) {}
}

http://jsfiddle.net/g77Lyysp/2/

Answer 4

您可以使用.on（）而不是点击。这将允许您操纵动态生成的元素。

$(document).ready(function () {


$('#Test').on('click', function() {
       $(this).hide();
       LotsOfWork();
    });
});

function LotsOfWork() {
    for (var i = 0; i < 1000000000; i++) {}
}

jsfiddle - http://jsfiddle.net/g77Lyysp/6/ - 我使用了setTimeout而不是for循环来演示点击和提醒之间的延迟。

jQuery在处理程序返回之前不隐藏元素

4 个答案: