使用javascript按需强制DOM重绘

Question

问题的标题表达了我认为是我的具体案例背后的最终问题.

我的情况:在一个点击处理程序中,我想在繁忙的函数开始之前使图像可见(一个'加载'动画).然后我想在函数完成后再次使它不可见.而不是我所期望的,我意识到图像永远不会变得可见.我想这是由于浏览器等待处理程序结束,然后才能进行任何重绘(我确信有很好的性能原因).

代码(也在这个小提琴:http://jsfiddle.net/JLmh4/2/)

HTML:

<img id="kitty" src="http://placekitten.com/50/50" style="display:none">
<div><a href="#" id="enlace">click to see the cat</a> </div>

JS:

$(document).ready(function(){
    $('#enlace').click(function(){
        var kitty = $('#kitty');
        kitty.css('display','block');

        // see: http://unixpapa.com/js/sleep.html
        function sleepStupidly(usec)
        {
            var endtime= new Date().getTime() + usec;
            while (new Date().getTime() < endtime)
                ;
        }

        // simulates bussy proccess, calling some function...

        sleepStupidly(4000);

        // when this triggers the img style do refresh!
        // but not before
        alert('now you do see it');

        kitty.css('display','none');
    });
});

我alert在sleepStupidly函数后面添加了调用,以显示在那个休息时刻,浏览器会重绘,但之前不会重绘.我无辜地期望在将'display'设置为'block'后重新绘制;

为了记录,我还尝试了附加html标签或交换css类,而不是显示和隐藏在此代码中的图像.结果相同.

经过我所有的研究后,我认为我需要的是强制浏览器重绘并停止其他所有事情的能力.

可能吗？是否有可能以交叉浏览器的方式进行？有些插件我找不到也许......？

我认为这可能就像'jquery css callback'(在这个问题中:在JQuery中,是否有可能在设置新的css规则后得到回调函数？)会做到这一点......但这不存在.

我也尝试分离显示,函数调用和隐藏在同一事件的不同处理程序中......但没有.还添加了一个setTimeout延迟函数的执行(这里推荐:在JavaScript中强制DOM刷新).

谢谢,我希望它也能帮助别人.

哈维尔

编辑(在设置我的首选答案后):

只是为了进一步解释为什么我选择了window.setTimeout策略.在我的实际用例中,我已经意识到为了给浏览器足够的时间来重绘页面,我不得不给它大约1000毫秒(比小提琴例子的50多).我认为这是由于更深层次的DOM树(实际上是不必要的深层).setTimeout let方法允许您这样做.

Answer 1

使用JQuery show和hide回调(或以其他方式显示fadeIn/fadeOut之类的东西).

http://jsfiddle.net/JLmh4/3/

$(document).ready(function () {
    $('#enlace').click(function () {
        var kitty = $('#kitty');


        // see: http://unixpapa.com/js/sleep.html
        function sleepStupidly(usec) {
            var endtime = new Date().getTime() + usec;
            while (new Date().getTime() < endtime);
        }

        kitty.show(function () {

            // simulates bussy proccess, calling some function...
            sleepStupidly(4000);

            // when this triggers the img style do refresh!
            // but not before
            alert('now you do see it');

            kitty.hide();
        });
    });
});

Answer 2

使用window.setTimeout()一些短暂的无法察觉的延迟来运行慢速功能:

$(document).ready(function() {
    $('#enlace').click(function() {
        showImage();

        window.setTimeout(function() {
            sleepStupidly(4000);
            alert('now you do see it');
            hideImage();
        }, 50);
    });
});

现场演示