我正在尝试执行一些面向对象的 JavaScript 来简单地使用淡入淡出过渡来交换图片，但页面加载时没有任何反应。
我的所有图像都命名为 Joe_#.jpg，其中 # 是数字。
这是我的 imagesJS.js 文件:
//GLOBALS
var delay = 5000;
var opacityDelay = 100;
var pathBeginning = "images\joe\Joe_";
var pathEnding = ".jpg";
//IMAGE CLASS
function imageObj(id, start, end, initDelay) {
this.obj = document.getElementById(id);
this.cur = start;
this.start = start;
this.end = end;
this.initDelay = initDelay;
this.opacity = 1;
this.fadeIn = function() {
if(this.opacity < 1) {
this.opacity = this.opacity + 0.1;
obj.style.opacity = this.opacity;
setTimeout(this.fadeIn(), opacityDelay);
}
}
this.nextImage = function() {
if(this.cur == this.end) {
this.cur = this.start;
}
else {
this.cur++;
}
obj.src = pathBeginning + this.cur.toString() + pathEnding;
this.fadeIn();
}
this.fadeOut = function() {
if(this.opacity > 0.5) {
this.opacity = this.opacity - 0.1;
obj.style.opacity = this.opacity;
setTimeout(this.fadeOut(), opacityDelay);
}
else {
this.nextImage();
}
}
this.process = function() {
setInterval(this.fadeOut(), delay + Math.floor(Math.random()*delay));
}
}
imageObj.prototype.startProcess = function() {
setTimeout(this.process(), this.initDelay);
}
//IMAGE OBJECTS
var img1 = imageObj('img1', 1, 5, 5000);
img1.startProcess();
以下是我在 HTML 页面上包含所有内容的方法:
<head>
<!-- Links/Scripts -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="myJavascript.js" type="text/javascript"></script>
<script src="imagesJS.js" type="text/javascript"></script>
这是 myJavascript.js 文件(也许与之有关):
// GLOBAL VARIABLES
var body = $('.body');
//***********//
// On Load //
//***********//
$(document).ready(function(){
//MenuItem Color Change
$('.menuItem').mouseover(function(){
$(this).css({"color":"#6699ff"})
}).mouseout(function(){
$(this).css({"color":"black"})
});
});
我应该将对象放入 onLoad 函数中吗？我似乎找不到我的问题。 提前致谢!
//############################################## ################################ 更新1
这是更正下面来自 net.uk.sweet 的建议以及此链接 Using setTimeout() within a JavaScript class function 中的一些范围问题后的代码
更新的代码 -
//GLOBALS
var delay = 5000;
var opacityDelay = 100;
var pathBeginning = "images\joe\Joe_";
var pathEnding = ".jpg";
//IMAGE CLASS
function imageObj(id, start, end, initDelay) {
this.obj = document.getElementById(id);
this.cur = start;
this.start = start;
this.end = end;
this.initDelay = initDelay;
this.opacity = 1;
this.fadeIn = function() {
if(this.opacity < 1) {
this.opacity = this.opacity + 0.1;
this.obj.style.opacity = this.opacity;
setTimeout(fadeIn, opacityDelay);
}
}
this.nextImage = function() {
if(this.cur == this.end) {
this.cur = this.start;
}
else {
this.cur++;
}
this.obj.src = pathBeginning + this.cur.toString() + pathEnding;
this.fadeIn();
}
this.fadeOut = function() {
if(this.opacity > 0.5) {
this.opacity = this.opacity - 0.1;
this.obj.style.opacity = this.opacity;
setTimeout(fadeOut, opacityDelay);
}
else {
this.nextImage();
}
}
this.process = function() {
var self = this;
self.fadeOut();
setInterval(function() {self.fadeOut();}, delay+Math.floor(Math.random()*delay));
}
}
imageObj.prototype.startProcess = function() {
var self = this;
setTimeout(function() {self.process();}, this.initDelay);
}
//IMAGE OBJECTS
var img1 = new imageObj('img1', 1, 5, 5000);
img1.startProcess();
不幸的是，它仍然不起作用......有什么想法吗？
//############################################## #################################### 解决方案更新
我必须在其他 javascript 文件的 onLoad 函数中添加 startProcess 函数的创建和调用。
这是解决方案代码:
//GLOBALS
var delay = 5000;
var opacityDelay = 100;
var pathBeginning = "images\\joe\\Joe_";
var pathEnding = ".jpg";
//IMAGE CLASS
function imageObj(id, start, end, initDelay) {
this.obj = document.getElementById(id);
this.cur = start;
this.start = start;
this.end = end;
this.initDelay = initDelay;
this.opacity = 1;
this.fadeIn = function() {
var self = this;
if(this.opacity < 1) {
this.opacity = this.opacity + 0.1;
this.obj.style.opacity = this.opacity;
setTimeout(function() {self.fadeIn();}, opacityDelay);
}
}
this.nextImage = function() {
if(this.cur == this.end) {
this.cur = this.start;
}
else {
this.cur++;
}
this.obj.src = pathBeginning + this.cur.toString() + pathEnding;
this.fadeIn();
}
this.fadeOut = function() {
var self = this;
if(this.opacity > 0.2) {
this.opacity = this.opacity - 0.1;
this.obj.style.opacity = this.opacity;
setTimeout(function() {self.fadeOut();}, opacityDelay);
}
else {
self.nextImage();
}
}
this.process = function() {
var self = this;
self.fadeOut();
setInterval(function() {self.fadeOut();}, delay + Math.floor(Math.random()*delay));
}
}
imageObj.prototype.startProcess = function() {
var self = this;
setTimeout(function() {self.process();}, this.initDelay);
}
感谢 net.uk.sweet 的所有帮助!!! 学到了很多关于范围和 chrome 开发工具的知识! 希望有一天我可以帮助别人!
最佳答案
如果您熟悉自己喜欢的浏览器中的调试工具 ( here's how )，那么您将会帮自己一个大忙。控制台将输出代码中任何错误的详细信息以及您输入的任何日志语句，以帮助您跟踪程序的流程，并且您可以使用高级调试功能(例如断点)来逐步执行代码并查看它在哪里发生故障。
也就是说，我可以看到您的代码存在一些明显的问题。
在 JavaScript 中使用函数定义实例化新对象时，需要使用 new 关键字:
var img1 = new imageObj('img1', 1, 5, 5000);
每次使用setTimeout时，您都会直接调用该函数，而不是通过引用传递它。这意味着该函数会立即执行，而不是在超时完成时执行。例如，您应该按如下方式更新 startProcess 方法中的代码:
// Note the missing parenthesis. You should pass the function to
// setTimeout by reference instead of invoking the function directly.
setTimeout(this.process, this.initDelay);
但是...在使用 setTimeout 时，您还会遇到与范围相关的问题(请参阅 this stackoverflow thread 上的答案以获得更好的解释)。尝试使用闭包来确保以实例而不是全局窗口对象为范围调用您的方法:
imageObj.prototype.startProcess = function() {
var self = this;
setTimeout(function() {
self.process();
}, this.initDelay);
}
我认为 obj 变量超出了您引用它的方式的范围。尝试使用以下方式访问它:
this.fadeIn = function() {
// Sending information to the console is a very simple way of debugging
// your program. You can even use it to trace the value of variables!
console.log('In here! Current image opacity is:', this.opacity);
if(this.opacity < 1) {
this.opacity = this.opacity + 0.1;
this.obj.style.opacity = this.opacity;
setTimeout(this.fadeIn(), opacityDelay);
}
}
关于javascript - OO Javascript 调试 - 带过渡的图像交换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19059347/