整整一下午,都在解决 window.onresize 中方法丢失不执行的问题!姿势固定在电脑前,颈椎病都犯了。
前些日子与大家分享了一下关于 防止jquery $(window).resize()多次执行其中方法的文章,没写全,留了一大堆问题,我理解的方法是这样的:
function foo() { var resizable = null; window.onresize = function() { if (resizable) { clearTimeout(resizable) } resizable = setTimeout(function(){ //onresize 执行 ss(); },200) } } function ss(){ //.... }
我们定义了一个变量 resizable 来存储 onresize 中需要执行的方法,起到了延迟执行并在一定时间内执行一次的作用。
此处,若 var resizable = null; 变成 resizable = null; 想必问题不大,暂且认为只有一个方法和一个对象被调用,内存中也只有一个 resizable且是全部变量。
接着有了这样的需求:多个 foo(obj) 方法在运行
/* * 多个 foo(obj) 方法在运行 */ window.onload = function(){ foo(obj001); foo(obj002); foo(obj003); } function foo(obj) { //第一次执行 ss(obj); var resizable = null; window.onresize = function() { if (resizable) { clearTimeout(resizable) } resizable = setTimeout(function(){ //onresize 执行 ss(obj); },200) } } function ss(obj){ //.... }
此处若是 esizable = null; 没有加上 var 声明,resizable = setTimeout(function(){ //onresize 执行 ss(obj); },200);中的方法就仅仅是 foo(obj003) 了。因为内存中也有一个 resizable且是全部变量,前两个被覆盖了。
此次坠坑纯粹是自己不小心,害得自己浪费宝贵的绳命时间,换来颈肩腰腿痛,在此留帖,以警后时!