window.onresize 多次触发的解决方法_javascript技巧-js教程-PHP中文网

window.onresize 多次触发的解决方法_javascript技巧

php中文网

发布： 2016-05-16 17:16:44

原创

1585人浏览过

之前做一个扩展，需要在改变窗口大小的时候保证页面显示正常，于是用了 window.onresize 但是发现每次 onresize 后页面中状态总是不对，后来查找出来原来是 onresize 事件触发了多次找成的，于是网上搜集了下解决办法，整理一下。
//
关于 onresize 事件触发次数，不同浏览器不同，safari, opera, firefox 都是一次(分别只用了一个版本测试，都是较新的);
//ie6 在 quirk 下触发 2 次，标准下 3 次；ie7，8 在 quirk 和 standard 都是两次。

Delphi 7应用编程150例全书内容 CHM版

Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识

查看详情

复制代码代码如下:

 
window.onresize = function(){ 
console.log( 'hello world'); 
} 
onresize 触发多少次并不重要，重要的是解决办法：在触发多次的情况下之调用一次帮定到 onresize 上的函数 
// 
//debounce 这个词不知道怎么翻译，兄弟我非科班出身，不敢轻易翻译，以免怡笑大方。:) 
// 
var debounce = function (func, threshold, execAsap) { 
var timeout; 
return function debounced () { 
var obj = this, args = arguments; 
function delayed () { 
if (!execAsap) 
func.apply(obj, args); 
timeout = null; 
}; 
if (timeout) 
clearTimeout(timeout); 
else if (execAsap) 
func.apply(obj, args); 
timeout = setTimeout(delayed, threshold || 100); 
}; 
} 

// 说明代码不是我写的。
// 代码说明:
debounce 接受 3 个参数，后两个可选；第一个是要 debounce 的函数，第二个代表 debouce 的时间间隔，第三个在时间段的开始还是结束执行函数;
debounce 返回包装好的函数，该函数两次执行间隔至少是 threshold，并且小于 threshold 间隔的调用会重新开始计时( 两次调用的时间间隔);
把 clearTimeout( timeout ) 换为 timer = null; 返回函数两次执行间隔至少是 threshold，并且小于 threshold 间隔的调用会重新开始计时( 两次调用的时间间隔);
// 解决 onresize 多次调用

复制代码代码如下:

 
window.onresize = debounce( function(){ 
alert( 'hello world'); 
}, 100, true) 

// 在自动补齐中为了减少请求服务器次数也会用到 debounce, 只有连续敲键间隔大于某个值才会发送 ajax

大家都在看：

javascript中的this是什么_它的指向如何确定什么是严格模式_javascript中它有哪些限制？什么是javascript全局对象_浏览器与Node环境有何不同？ Terser模块模式下保留HTML调用函数的策略与实践解决Terser优化中移除全局函数的问题：策略与实践