Question

我开始讨厌javascript中的对象。

每次出现错误并修复时，都会出现新错误，等等你能看一下下面的代码并告诉我出了什么问题吗？

问题讯息：
“这个。图像未定义” 还有更多的错误

HTML文件

<div id="SlideShow" >
   <img id="img" src="images/img.jpg" alt="" /><span id="desc"></span>
</div>

<script type="text/javascript">
    meToo.Images = ['images/img.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg','images/img5.jpg'];
    meToo.Titles = ['Pic1','pic2','Pic3','Pic4','Pic5'];
    meToo.Play('img');
</script>

Javascript对象

var meToo = {
     Images: [],
     Titles: [],
     counter: 0,
     Play: function(ElemID){
         var element = document.getElementById(ElemID);
         var ImgLen = this.Images.length;

         if(this.counter < ImgLen){
             this.counter++;
             element.src = this.Images[this.counter];
             element.nextSibling.innerHTML = this.Titles[this.counter];
         }else{
             this.counter = 0;
         }
         setTimeout(this.Play, 1000);
    }   
};

请参阅Example

Answer 1

See this question。否则setTimeout将this设置为window对象。此外，计数器应在设置图像后递增，否则您将在数组边界外读取。

最后，当将计数器重置为0时，在循环重启之前会有一个额外的一秒延迟，因为该else块中的图像没有被重置。您可能希望重写逻辑部分。

Updated Fiddle

    if(this.counter < ImgLen){
        element.src = this.Images[this.counter];
        element.nextSibling.innerHTML = this.Titles[this.counter];
        this.counter++;
    }else{
        this.counter = 0;
    }
    var _this = this;
    setTimeout(function() { _this.Play('img') }, 1000);

This是我要写的，以保持循环以一秒的间隔运行：

Play: function(ElemID) {
    var element = document.getElementById(ElemID);
    var ImgLen = this.Images.length;

    if (this.counter == ImgLen) {
        this.counter = 0;
    }
    element.src = this.Images[this.counter];
    element.nextSibling.innerHTML = this.Titles[this.counter];
    this.counter++;

    var _this = this;
    setTimeout(function() {
        _this.Play('img')
    }, 1000);
}

Answer 2

if(this.counter < ImgLen)

错了。

这里会发生什么，当你运行

this.counter++;

该变量的值现在为ImgLen.length

javascript中的数组从0变为长度-1。所以当你运行时，你将超过数组的长度：

this.Images[this.counter];

并遇到错误。

此处的快速解决方法是更改为

if(this.counter < ImgLen -1)

如果您遇到其他问题，请发布确切的错误消息。（在Chrome中运行并按F12（例如）以显示控制台，以便您可以查看错误）。

Answer 3

在这里检查一下。它应该完美适合你。我已经把它作为一个单独的对象而且我正在检查是否包含meToo.Play在dom加载之前被调用它不会崩溃。所有其他错误上面提到的那些人也都在照顾。

    <script>
    var meToo = function(){
    var Images = ['http://www.image-upload.net/di/WMPI/img.jpg','http://www.image-upload.net/di/HPUQ/img2.jpg','http://www.image-upload.net/di/WQ9J/img3.jpg','http://www.image-upload.net/di/GIM6/img4.jpg','http://www.image-upload.net/di/0738/img5.jpg'];
    var Titles = ['Pic1','pic2','Pic3','Pic4','Pic5'];
    var counter = 0;
    return {
        Play: function(ElemID) {
            var element = document.getElementById(ElemID);
            if(element){
                var ImgLen = Images.length;

                if(counter < ImgLen) {
                    element.src = Images[counter];
                    element.nextSibling.innerHTML = Titles[this.counter];
                    counter++;
                } else {
                    counter = 0;
                }
            }
            setTimeout(callmeToo, 1000);
        }
    }
    }();

    function callmeToo(){
        meToo.Play('img');  
    }

    callmeToo();
</script>

javascript对象的一些错误

3 个答案: