时间戳

首页 > 解决方案 > 重构 onload 以添加第二个功能？奖励：一般来说，向变量添加第二个函数怎么样？

javascript - 重构 onload 以添加第二个功能？奖励：一般来说，向变量添加第二个函数怎么样？

问题描述

我有两个问题顺序？

我有两组要重构的代码。每个都有一个负载。

两者都将在站点上自行运行，但我不希望它们覆盖彼此的加载。

所以我有以下等价物：

window.onload=function(){ alert("foo")};

和

window.onload=function(){ alert("bar")};

在两个文件中。

为了避免一个覆盖另一个的 window.onload 分配，我将它们重构为：

window.onload+=function(){ alert("foo")};

和

window.onload+=function(){ alert("bar")};

但后来似乎两者都没有起火。

而且由于它似乎可以帮助我了解情况并且通常是一项不错的技能，所以我如何向函数变量添加额外的函数？（它与 onload 相同，还是 onload 是一个特殊情况？它让我觉得可能有特殊情况。）

所以如果我有...

var Varrick = function(){ alert("Do the thing!");}

我有

var Zhu_li = function (){ alert("Did the thing."); }

什么是有效的命令

var Varrick = Varrick + Zhuli.

所以...

Varrick(); // Alerts "Do the thing!" then alerts "Did the thing."

注意：我想在不依赖 jQuery 的情况下做到这一点。

标签： javascriptfunctiononload

解决方案

这就是为什么分配给on-属性通常不是一个好主意的原因之一 - 如果该属性上以前存在任何内容，它将被覆盖，因此只有最新的处理程序会触发。（并且不要试图相互+=发挥作用）

尝试添加DOMContentLoaded侦听器：

function foo() {
  console.log('foo');
}
function bar() {
  console.log('bar');
}
document.addEventListener("DOMContentLoaded", foo);
document.addEventListener("DOMContentLoaded", bar);

如何向函数变量添加附加函数？

如果您必须只有一个侦听器，则只需在侦听器中调用这两个函数：

document.addEventListener("DOMContentLoaded", () => {
  foo();
  bar();
});

这就像

window.onload = function(){
  foo();
  bar();
};

（但是，通常更好用addEventListener）

推荐阅读