window resize 优化：after resize completed, fire event

发表于

场景：


每当 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);
});