setInterval 只触发一次

Question

我知道这可能看起来是重复的，但这里不是这种情况。我正在尝试使用 OOP 方法创建一个简单的 Slider。所以这是我到目前为止所得到的：

function Slider(){
    this.totalSlides = 3;
    this.sliderImagesRoot = 'images/slider/';
    this.imagesLinks = [this.sliderImagesRoot + '1.png',this.sliderImagesRoot + '2.png',this.sliderImagesRoot + '3.png'];
    this.titles = ['State of the Art', 'Best staff kk', 'Toratos'];
    this.descriptions = ['First description, bla bla bla', 'werewr','Toraki']; 
    this.slideDelay = 1200;
    this.currSlide = 1;

    this.initSlider = function(){
        var createSlide = this.createSlide();
        var sliding = setInterval(function(createSlide){
            createSlide();
        }, 500);

    }

    this.createSlide = function(){
            alert("er");  
    }
}

我认为这与传入函数有关，有什么想法吗？顺便说一句，我是第一次尝试在JS中实现OOP

Answer 1

您不需要为对象（代码中的initSlider）创建单独的构造函数方法，函数Slider 本身就是构造函数。尝试这样的事情：

function Slider(){
    this.totalSlides = 3;
    this.sliderImagesRoot = 'images/slider/';
    this.imagesLinks = [this.sliderImagesRoot + '1.png',this.sliderImagesRoot + '2.png',this.sliderImagesRoot + '3.png'];
    this.titles = ['State of the Art', 'Best staff kk', 'Toratos'];
    this.descriptions = ['First description, bla bla bla', 'werewr','Toraki']; 
    this.slideDelay = 1200;
    this.currSlide = 1;

    var createSlide = function(){
            alert("er");  
    }
    var sliding = setInterval(function(){
        createSlide();
    }, 500);


}

然后你可以像这样构建对象：

var slider = new Slider();

Answer 2

redneb 的回答应该是您需要继续的内容，但我想指出一些可能有用的其他内容。而不是一些单独的列表（links、titles、descriptions）和一个独立的计数器，所有这些都需要保持同步，这样存储你的数据会更干净在这样一个简单的结构中：

var slides = [
    {linK: '1.png', title: 'State of the Art', desc: 'First description,...'},
    {link: '2.png', title: 'Best staff kk',    desc: 'werewr'},
    {link: '3.png', title: 'Toratos',          desc: 'Toraki'}
];

然后你可以推导出totalSlides为slides.length，当你去使用link 属性时，你可以在前面加上sliderImagesRoot。

Answer 3

setInterval 回调按预期调用 - 但是，在回调内部，您试图调用作为参数传递的函数，但您没有传递任何内容，因此它将是未定义的。

如果您运行代码，您应该会看到一条错误消息：

TypeError: createSlide is not a function

setInterval 只触发一次

setInterval firing only once

javascript

oop

jquery

setinterval