为什么不调用Javascript函数？
[英]Why is Javascript function not being called?
问题描述
本网站上的第一个问题，希望我做对！ 我有一个javascript函数，我希望在页面加载时显示图像（image1.jpg），然后每2秒钟通过循环更改一次图像。 但是，只有第一个图像显示，因此似乎未调用JS函数。 谁能告诉我我在这里做错什么了吗，因为它对我来说看起来很好，所以不明白为什么它不起作用。 谢谢
<html>
<head>
<script type="text/javascript">
function displayImages(){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var i = 1;
if(i>images.length-1){
this.src=images[0];
i=1;
}else{
this.src=images[i];
i++;
}
setTimeout("displayImages()", 2000);
}
</script>
</head>
<body onload="displayImages();">
<img id="myButton" src="image1.jpg" />
</body>
</html>
7 个解决方案
解决方案1
7 已采纳 2014-04-24 09:12:24
您需要移动线
var i = 1;
在 displayImages -function 之外 ，否则每次都会从一个开始！
编辑：但是使用全局变量不被认为是一种好习惯，因此您可以使用闭包代替。 另外，正如其他答案中所指出的那样，您引用的是未引用图像对象的对象，因此我this进行了更正并简化了逻辑：
<script type="text/javascript">
function displayImages( i ){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var img = document.getElementById('myButton');
img.src = images[i];
i = (i+1) % images.length;
setTimeout( function() { displayImages(i); }, 2000 );
}
</script>
<body onload="displayImages(0);">
解决方案2
3 2014-04-24 09:19:00
您需要在每次调用时都可以使用i的值，可以使用以下方法将其保存在闭包中：
var displayImages = (function() {
var i = 0;
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
return function() {
document.getElementById('myButton').src = images[i++ % images.length];
setTimeout(displayImages, 2000);
}
}());
此外，由于这是不被调用设置，则默认为全局/ window对象，所以你需要去的图像的参考。 这也可以封闭进行。
解决方案3
1 2014-04-24 09:12:17
您每次都在重新初始化i值，因此请更改以下内容：
function displayImages(){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
if(!displayImages.i || displayImages.i >= images.length) displayImages.i = 0;
document.getElementById('myButton').src = images[displayImages.i];
displayImages.i++;
setTimeout(displayImages, 2000);
}
函数是JS中的对象，因此：
- 您可以通过引用而不是作为字符串来传递它们，以提高性能和可读性
- 您可以像使用
displayImages.i一样向功能对象添加字段甚至方法
编辑：我已经意识到，还没有为按钮设置src另一个问题。
现在，我已修复此问题，并进行了其他改进。
这是小提琴http://jsfiddle.net/aD4Kj/3/仅将图像URL更改为实际显示内容。
解决方案4
1 2014-04-24 09:24:43
这里有几个问题阻止了此工作。
首先， var i = 1; 需要将其移到函数外部以使增量生效。 另请注意，数组中的第一项是0，而不是1。
其次你使用this指改变图像的src ，但是this并不像一个参考。 最好的办法是在这里使用document.getElementById代替。
var i, button;
i = 0;
button = document.getElementById('myButton');
function displayImages() {
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
if (i > images.length - 1){
button.src = images[0];
i = 0;
}
else{
button.src = images[i];
i++;
}
setTimeout(displayImages, 2000);
}
仍有一些改进和优化的空间，但这应该可行。
解决方案5
0 2014-04-24 09:16:49
<html>
<head>
<script type="text/javascript">
var i = 1;
function displayImages() {
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
i++;
if (i > images.length - 1) {
i = 0;
}
$('#myButton').attr('src', images[i]);
setTimeout(displayImages, 2000);
}
</script></head>
<body onload="displayImages();">
<img id="myButton" src="img1.jpg" height="150px" width="150px"/>
</body>
</html>
让我全球化。
解决方案6
0 2014-04-24 09:21:16
<script type="text/javascript">
var i = 1;
function displayImages(){
.......
........
只需将“ i”设置为全局即可。 这样，无论何时调用displayImages，它都不会重新定义为1。
解决方案7
0 2014-04-24 09:51:39
在这里，您递归使用displayImages()和变量为索引i。 如果i在函数displayImages()中将其分配为局部变量，则需要为其分配全局变量，即在函数外部也应从i=0对其进行初始化，因为数组索引始终从0开始，
您的代码成为
var i = 0; // assign i global
function displayImages(){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
if(i>images.length-1){
document.getElementById('myButton').src=images[0]; //get img by id
i=0; // to get first image
}
else{
document.getElementById('myButton').src=images[i]; //get img by id
i++;
}
setTimeout("displayImages()", 2000);
}
为什么没有调用这个“OnScroll” JavaScript Function？
[英]Why Is This “OnScroll” JavaScript Function Not Being Called?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.