javascript - 如何编写多个javascript函数？

Question

我试图仅使用 javascript(无 jquery)在滚动事件上调用两个函数，但一次只能调用一个函数。

    window.onscroll = function() {cartFunction()};
    function cartFunction() {
        if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
            document.getElementById("shopping-cart").className = "sticky-cart";
        } else {
            document.getElementById("shopping-cart").className = "";
        }
    }
    window.onscroll = function() {cartFunction()};
    function cartFunction() {
        if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
            document.getElementById("scroll-top").className = "show";
        } else {
            document.getElementById("scroll-top").className = "";
        }
    }

Answer 1

您的代码有两个问题:

1. 您定义了 cartFunction 函数两次，因此第二个定义会覆盖第一个定义

2. 您正在使用 windows.onload=，在 javascript 中，变量/属性只能保存一个值，因此您实际上是在破坏第一个值并用第二个值覆盖它

其中任何一个问题都会导致仅调用 cartFunction 的第二个版本 - 因此这两个问题都需要解决

首先，假设您希望将两个函数分开，并且作为全局范围的函数，对代码最简单的更改是:

function cartFunction1() {
    if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
        document.getElementById("shopping-cart").className = "sticky-cart";
    } else {
        document.getElementById("shopping-cart").className = "";
    }
}

function cartFunction2() {
    if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
        document.getElementById("scroll-top").className = "show";
    } else {
        document.getElementById("scroll-top").className = "";
    }
}

window.onscroll = function() {cartFunction1(); cartFunction2()};

或者，最后一行可以替换为

window.addEventListener('scroll', function() {cartFunction1(); cartFunction2()});

甚至

window.addEventListener('scroll', cartFunction1);
window.addEventListener('scroll', cartFunction2);

如您所见，您可以添加多个“滚动”事件监听器，它们都会被调用

插入有关 Internet Explorer 8 或更早版本的常见警告

但是，如果这两个函数可以组合并且不需要全局作用域

window.addEventListener('scroll', function cartFunction1() {
    if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
        document.getElementById("shopping-cart").className = "sticky-cart";
        document.getElementById("scroll-top").className = "show";
    } else {
        document.getElementById("shopping-cart").className = "";
        document.getElementById("scroll-top").className = "";
    }
});