把多个JavaScript函数绑定到onload事件处理函数上的方法


Posted in Javascript onSeptember 04, 2016

为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上:

window.onload = userFunction

但如果有两个函数:firstFunction() 和 secondFunction(),都想让它们在页面加载完毕后得到执行,该怎么办?如果这样:

window.onload = firstFunciton;
window.onload = secondFunction;

只有最后一个函数能被执行。由此可得:每个事件处理函数只能绑定一条指令。

但我们可以这样做:

window.onload = function(){
     firstFunction();
     secondFunction();
   }

这是一个解决办法。

不过,还有一个更通的解决方案——额外编写一些代码,但好好处是,有了这些代码,把函数,不管它们有多少,绑定到window.onload事件上的工作就非常简明易行了。

这个函数的的名字是addLoadEvent,它是由Simon Willison编写的。它只有一个参数:打算在页面加载完毕时执行的函数的名字。

下面是addLoadEvent()函数将要完成的操作:

1. 把现有的window.onload事件处理函数的值存入变量oldonload。

2. 如果在这个处理函数上还没有绑定任何函数,就像平时那样把形函数添加给它。

3. 如果在这个处理函数上已经绑定了一些函数,就把形函数追加到现有指令的末尾。

下面是addLoadEvent()函数的代码清单:

function addLoadEvent(func){
     var oldonload = window.onload;
     if(typeof window.onload != 'function'){
        window.onload = func;
     }else{
        window.onload = function(){
          oldonload();
          func();
        }
     }
}

这相当于为那些将在页面加载完毕时执行的函数创建了一个队列。如果想把刚才那两个函数添加到队列中去,只需要写出以下代码即可:

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

以上这篇把多个JavaScript函数绑定到onload事件处理函数上的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
JS简单测试循环运行时间的方法
Sep 04 #Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 #Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 #Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 #Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 #Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 #Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 #Javascript
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
PHP Memcached应用实现代码
2010/02/08 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
js实现随机点名
2021/01/19 Javascript
使用Python实现简单的服务器功能
2017/08/25 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python lambda的使用详解
2021/02/26 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
土建资料员岗位职责
2014/01/04 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
优质服务活动实施方案
2014/05/02 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
护士医德考评自我评价
2015/03/03 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书