javascript - 覆盖不同页面上的javascript函数

Question

这对我来说是新的，我不知道如何处理。

该页面有一个 Logo ，该 Logo 使用转换来更改其大小和颜色，并由此在 HTML 底部触发:

document.onload="initialize()"
setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.95)');
        $('#path2').css('transform','scale(.95)');
        $('#path2').css('fill','#F7A700');
    }, 2000);
$('#path1').css('transform','scale(1.05)');
    $('#path2').css('transform','scale(1.00)');
    $('#path2').css('fill','#FFCF55');
}, 4000);

这将启动过渡并协调更改 svg 路径的颜色。在一个单独的脚本页面上，有一个函数可以确定当前页面 slider ，我需要为特定页面更改 #path2 上的 css 填充。我已经尝试过 if...else 语句，将 setInterval() 函数移动到同一页面等，但是没有什么能让我覆盖 setInterval() 函数。

修订:它包含在 html 中，并且有一个单独的 js 页面，其中包含所有其他功能。所以我认为这可能与此有关，但现在我明白它正在无限循环中运行，因此我尝试进行的任何更改都将被覆盖。它的 Logo 是一个具有多个路径的 svg，在主页幻灯片上，一个路径需要是白色的，其他所有页面幻灯片的所有内容都保持不变。只有一页html，内容在 slider 上滑动。不确定我是否解释得更好。我正在使用其他人完成的现有代码，所以我正在尝试使用我得到的代码，但也许有更好的解决方案来运行它？也许通过CSS？我需要它加载窗口或文档加载并无限运行，但需要能够修改它的 css。我必须使用 css 转换来设置它。

Answer 1

间隔设置为永远运行。如果您从另一个脚本设置颜色，则间隔将在下次运行时覆盖颜色。一种选择是在从其他脚本设置颜色时停止间隔。您需要一个变量来保存间隔 ID。

var timer = null;

您需要在开始间隔时保存间隔 ID。

timer = setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.75)');
        $('#path2').css('transform','scale(.75)');
        $('#path2').css('fill','#F7A700');
    }, 2000);
    $('#path1').css('transform','scale(1.50)');
    $('#path2').css('transform','scale(1.50)');
    $('#path2').css('fill','#FFCF55');
}, 4000);

在你的其他脚本中，设置颜色时停止间隔。

if (timer) {
    clearInterval(timer);
    timer = null;
}
$('#path2').css('fill','#00FF00');

编辑:

另一种可能的选择是使用 bool 标志来停止部分动画。这将允许您停止填充动画但继续动画的其余部分。您将需要一个 bool 标志来指示填充是否应该是动画的。将标志初始化为真。

var animateFill = true;

使用标志来确定间隔是否应该为填充属性设置动画。

setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.75)');
        $('#path2').css('transform','scale(.75)');
        if (animateFill){
            $('#path2').css('fill','#F7A700');
        }
    }, 2000);
    $('#path1').css('transform','scale(1.50)');
    $('#path2').css('transform','scale(1.50)');
    if (animateFill) {
        $('#path2').css('fill','#FFCF55');
    }
}, 4000);

在您的其他脚本中，在设置填充颜色时将标志设置为 false。

animateFill = false;
$('#path2').css('fill','#00FF00');

如果稍后需要重新启动填充颜色的动画，请将标志设置回 true。

animateFill = true;