setInterval 只触发一次答案

【问题标题】：setInterval firing only oncesetInterval 只触发一次
【发布时间】：2016-09-11 19:56:16
【问题描述】：

我知道这可能看起来是重复的，但这里不是这样。我正在尝试使用 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。

【问题讨论】：

this.createSlide 未定义。
How to pass "this" to window setInterval的可能重复
这个“这个”不应该存在，它是我尝试的东西的剩余部分。我刚刚编辑了它，没有这个重新阅读它。
@Xufox 对不起，我没有偶然发现这篇文章，我现在就去看看。
createSlide 是一个函数参数，但该函数不带任何参数调用。试试setInterval(function(createSlide){…}, 500, createSlideFunction); 其中createSlideFunction 是声明和定义的函数。

标签： javascript jquery oop setinterval

【解决方案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();

【讨论】：

所以我想从每个变量中删除它可以吗？
@JoeVox 不一定。如果您希望能够从构造函数外部访问这些变量，则需要将它们存储在带有this 的对象中。所以本质上，this.totalSlides 使 totalSlides 成为对象的公共成员，而 var totalSlides 使其成为私有成员。

【解决方案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。

【讨论】：

是的，这种方法在很多方面都更方便，谢谢指出:)

【解决方案3】：

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

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

TypeError: createSlide is not a function

【讨论】：