OO Javascript 调试 - 带有过渡的图像交换答案

【问题标题】：OO Javascript Debugging - Image Swapping with TransistionOO Javascript 调试 - 带有过渡的图像交换
【发布时间】：2013-09-27 20:15:29
【问题描述】：

我正在尝试做一些 OO 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 开发工具的知识！希望有一天我可以帮助别人！

【问题讨论】：

标签： javascript jquery html image oop

【解决方案1】：

如果您熟悉自己喜欢的浏览器 (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);
    }
}

【讨论】：

谢谢！这绝对是有道理的，我用括号调用一个函数。虽然没有我传递对函数的引用。但是，似乎还有另一个错误。不过谢谢！
就像我说的，使用调试工具来追踪问题，然后如果您不理解它，请返回一个问题。我又看了一遍，发现了另外几个错误，但如果你没有先尝试帮助自己，人们通常不会准备好为你调试你的代码。
我一直在使用 Chrome 开发工具对其进行调试，它告诉我，一旦在 initDelay 之后调用了“进程”函数，则 this.fadeOut() 函数在范围内无法识别。特别是这个错误：code Uncaught TypeError: Object [object global] has no method 'fadeOut' code
您也遇到了范围问题。看看下面的内容，它解释了如何在正确的范围内调用 setTimeout：stackoverflow.com/questions/6997921/…
我认为我很好地遵循了该链接。我在上面粘贴了更新的代码。再次感谢到目前为止的所有帮助！