浏览器onresize方法将被执行多次问题解决

最新推荐文章于 2021-07-06 18:02:14 发布

jiangwt80

最新推荐文章于 2021-07-06 18:02:14 发布

阅读量785

点赞数

分类专栏： UI 文章标签： ie 浏览器 UI JavaScript ViewUI

本文链接：https://blog.csdn.net/Maze122wt/article/details/84367894

版权

UI 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

window对象定义其onresize事件，在拉伸缩小窗口时，其onresize方法将被执行多次，并且其具体执行的次数在不同的电脑有不同的值，相当诡异
具体可参看这一篇文章[url=http://remysharp.com/2008/05/15/windowonresize-hangs-ie6-and-ie7/]<window.onresize hangs IE6 and IE7>[/url]
高阶函数debounce 正是为此而生的


/** 
* IE下 window.onresize 有bug 可以使用debounce封装监听函数  
* see http://blog.csdn.net/fudesign2008/article/details/7035537 
* @author FuDesign2008@163.com 
* @date   2011-11-30 
* @time   下午04:02:55 
*/  

/** 
* 
* @param {Function} callback 回调函数 
* @param {Integer} delay   延迟时间，单位为毫秒(ms)，默认150 
* @param {Object} context  上下文，即this关键字指向的对象，默认为null 
* @return {Function} 
*/

function debounce(callback, delay, context){
    if (typeof(callback) !== "function") {
        return;
    }
    delay = delay || 150;
    context = context || null;
    var timeout;
    var runIt = function(){
            callback.apply(context);
        };
    return (function(){
	window.clearTimeout(timeout);
        timeout = window.setTimeout(runIt, delay);
    });
}
var winResizeHandler = function(event){
      console.log("window resized");
};

window.onresize= debounce(winResizeHandler, 300);