正文 onload 函数不适用于三个函数答案

【问题标题】：Body onload function does not work with three functions正文 onload 函数不适用于三个函数
【发布时间】：2013-05-18 23:53:45
【问题描述】：

因此，在我们的学校项目中，我们正在网络上创建一个图片库。我想要三个带有图像的块，其中所有三个块在三个图像之间旋转（总共 9 个）。

像这样 [] [] [] 其中每个块都是一个“图像块”，并且在这三个图像块中，图像将在更多图像之间旋转。

问题是我找到了一个有效的代码 sn-p。第一个答案。链接：How to change image-background after sometime?

此代码适用于我的一个图像块。所以我复制了函数并更改了函数名称，它对其中两个都有效。现在我对第三个做了完全相同的事情，但是图像旋转在所有三个上都停止了。

它说。然后它停止。如果我删除三个“changeimage”中的一个，它会起作用，两个会旋转，但是当三个都在那里时，它们都不起作用。

有人想重现我的问题吗？

我的 HTML（非常短的版本，注意 imglinks 不是真正的链接，而是一个示例）：

<body onload='changeimage(2); changeimage2(2); changeimage3(2);'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>

我的javascript和链接里的一模一样，只是我复制粘贴了三遍，把函数的名字改成了代码sn-p中onload的名字。我更改了 myimage id、set time out 中的函数名称和图像来源。

一切正常。但是当我同时使用这三个时，它就不起作用了。无论哪两个，它们中的两个都会一起工作，但三个都不会同时工作。

TLDR;不会一起工作，但两个和一个自己会。

有什么建议吗？ :) 问你是否不明白，我会尽力解释得更好。

【问题讨论】：

问题出在函数本身，也请贴出他们的代码。
显然其中一个函数产生异常并且代码失败。请发布函数 1 2 3
您是否使用/是否可以使用带有 Firebug 的 Firefox、带有开发工具的 Chrome/Safari，还是使用带有开发工具的 Internet Explorer？所有这些工具都有控制台，可以显示 JavaScript 错误，并可以帮助您确定未来的问题/问题所在。

标签： javascript html onload

【解决方案1】：

通过查看您链接到的代码，我的直接猜测是您没有为每个函数重新声明 imageID 变量以使其拥有自己的变量，这可能会导致问题。

但是，我应该注意，按照您的描述重新声明函数是错误的方法 - 函数的全部意义在于代码是可重用的，因此您不必重新编写它。正如 Daniel 所建议的，对图像 DOM id 使用附加参数是解决该问题的最佳方法。

我在这里重写了函数，稍微改进了逻辑并允许重复使用函数：

http://jsfiddle.net/Ebp75/

【讨论】：

很抱歉我之前没有回复。刚回去检查了我的日志。我确实最终使用了这个代码 sn-p，我现在明白了很多。非常感谢！ :)

【解决方案2】：

您发布的函数取决于外部变量“imageID”。如果你复制了3次函数，那么你也需要复制外部变量。

示例如下：

<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

var imageID2=0;
function changeimage2(every_seconds){
    //change the image
    if(!imageID2){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID2++;
    }
    else{if(imageID2==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID2++;
    }else{if(imageID2==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID2=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

var imageID3=0;
function changeimage3(every_seconds){
    //change the image
    if(!imageID3){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID3++;
    }
    else{if(imageID3==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID3++;
    }else{if(imageID3==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID3=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>

【讨论】：

【解决方案3】：

我不太确定问题是否在于 onload 可以包含要调用的函数列表，或者您的脚本中的某些内容（此处缺少）是否有问题。无论如何，在 onLoad 中有一个函数列表似乎不是一个好习惯。我会编写一个专用函数来处理 onLoad 并从那里调用这 3 个函数。

所以 html 看起来像这样

<body onload='onLoadHandler()'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>

您的脚本将如下所示：

function onLoadHandler(){
  changeimage(2); 
  changeimage2(2); 
  changeimage3(2);
}

// rest of your script
</script>

此外，我认为拥有三个 changeimage 函数是不必要的。对于不同的图像，他们可能会做几乎相同的三倍。因此，在下一步中，我会将它们简化为一个函数，并将更改部分作为参数传递给函数。像这样。

<script type='text/javascript'>

function onLoadHandler(){
  changeimage(2,'myimage'); 
  changeimage(2,'myimage2'); 
  changeimage(2,'myimage3'); 
}

function changeimage(numberParameter, imageId){
   // your logic usining imageId instead of a fixed, hardcoded id

}

</script>

【讨论】：