JS函数单独工作但不能一起工作[重复]答案

【问题标题】：JS Functions Work Separately But Not Together [duplicate]JS函数单独工作但不能一起工作[重复]
【发布时间】：2017-07-08 05:15:51
【问题描述】：

我正在使用两个函数来移动背景位置和缩放 div 的背景。他们在这里：

(function(shifting) {

    var parallax = document.querySelectorAll(".shiftparallax"),
        speed = -0.05;

    window.onscroll = function() {
        [].slice.call(parallax).forEach(function(el, i) {

            var windowXOffset = window.pageYOffset,
                elBackgrounPos = (windowXOffset * speed) + "px";
            console.log(elBackgrounPos);
            el.style.backgroundPositionY = elBackgrounPos;

        });
    };

})();


(function(zooming) {
    var parallaxfacts = document.querySelectorAll(".parallaxfacts"),
        constantsize = 100;
    speed = -0.03;
    window.onscroll = function() {

        if (window.innerWidth > 1024) {
            [].slice.call(parallaxfacts).forEach(function(el, i) {

                var windowXOffset = window.pageYOffset,
                    elBackgrounScale = (windowXOffset / 950 * constantsize) + "%";

                el.style.backgroundSize = elBackgrounScale;

            });
        }
    };

})();

问题是我需要它们同时运行，但它们只能单独运行。如果它们都这样写 - 第二个只运行，第一个什么也不做。如果我删除第二个，第一个开始工作。我最近对 JS 有点生疏了，所以我想不通。有什么方法可以让它们都工作吗？

【问题讨论】：

请说明你是如何调用函数的以及在什么条件下调用。
@Difster 他们是 IIFE（他们自称）。

标签： javascript function

【解决方案1】：

您分配给window.onscroll 两次。这意味着第二个处理程序“注销”第一个处理程序。

你可以使用addEventListener在两个函数中监听事件：

window.addEventListener("scroll", function() { /* function 1*/ });
window.addEventListener("scroll", function() { /* function 2*/ });

【讨论】：

做到了。我不知道他们互相取消了。谢谢！
它就像任何其他属性一样；如果你a = {}; a.x = 1; a.x = 2;，x 最后是2，因为属性只能有一个值。

【解决方案2】：

你覆盖了 window.onscroll 事件

试试这两行：

window.onscroll = el => console.log ('first');
window.onscroll = el => console.log ('second');

使用下面的代码...

window.addEventListener('scroll',  el => console.log ('firstlistener'));
window.addEventListener('scroll',  el => console.log ('secondlistener'));

【讨论】：

不要在这里使用el。它被用作内部函数中的变量。
是的，你也可以写：window.addEventListener('scroll', () => console.log ('secondlistener'));