window resize 优化:after resize completed, fire event

  |   0 评论   |   2,022 浏览

    场景:

    每当 window 发生变化时,需要对其内部的某些元素大小重新设定。

    原因:

    如果页面本身就非常复杂,在对内部元素大小设定后,可能导致整个页面重新渲染。调用 resize 方法,只要用户不停的改变窗口大小就会对页面进行不停的渲染,最终导致大量消耗 CPU,页面就卡卡卡。

    尤其是 IE6,如果 resize 影响到了 window 大小,将会继续 resize,最终导致不停的 resize,然后就崩溃了。

    思路:

    在用户 resize 完之后再去触发事件。

    在 resize 内创建一个 setTimeout,当用户不停的 resize 时,就先清除上一次的 setTimeout,其内部函数就不会被执行,当然这个时间必须设置的比较短。

    也就是说每次 resize 被触发的时候,就会清除上一次的 setTimeout,当停止 resize 的时候,最后一个 setTimeout 将无法被清除,当然就顺利执行了。

    代码如下:

    var timer = 0;
    $(window).resize(function () {
        clearTimeout (timer);
        timer = setTimeout(function () {
            console.log("window resize");
    	$("#list").table("setHeight", $(window).height() - 100);
        }, 500);
    });

     


    欢迎加入开源技术 Q 群 242561391 B3log,加入黑客派,让学习和分享成为一种习惯!

    评论

    发表评论

    validate