Javascript OOP literal access variable inside method

Question

i have a problem accessing variable inside method in OOP.

this is my code :

var slideshow = {

    elSet   : $(".slideshow"),
    next    : function() {

    },
    swipe   : function() {
                var clear = this.autorun().loop;

                onSwipe(function() {

                    clearInterval(clear); // not working
                });
    },
    autorun    : function() {

                var self = this;
                var loop = setInterval(function() {

                        self.next();

                    }, 5000);

    },
    initial : function() {

                this.swipe();
                this.autorun();
    }

}

slideshow.initial();

i want to clearInterval from variable loop ,

on browser console return error TypeError: this.loop(...) is undefined

what's wrong with my code?

Answer 1

Just assign the interval id returned by setInterval to a variable you can access, or like Barmar's answer return it.

    var slideshow = {

      elSet: $(".slideshow"),

      next: function() {

      },

      swipe: function() {
        var self = this;

        onSwipe(function() {
          //use the interval id to cancel
          clearInterval(self.intervalRef);
        });
      },

      // variable to store the interval id
      intervalRef: null,

      autorun: function() {
        var self = this;

        //assign the interval id generated by setInterval to a variable you can access
        this.intervalRef = setInterval(function() {
          self.next();
        }, 5000);
      },

      initial: function() {
        this.swipe();
        this.autorun();
      }

    }

slideshow.initial();

Answer 2

Issues:

1. var clear = this.autorun().loop; Here this will have scope swipe and not object.
2. var loop = setInterval(function() {}) Here loop will have scope of autorun and will expire after function execution is over.

You can try something like this:

JSFiddle

 function SlideShow() { // self will hold current object reference for all functions var self = this; var interval = null; function next() { console.log('next'); } function swipe() { onSwipe(function() { console.log("Clearint Interval") clearInterval(interval); }); } // Private function function onSwipe(callback) { console.log("On Swipe"); // Check if value is passed and its a function if (callback && typeof(callback) === 'function') callback(); } function loop() { interval = setInterval(function() { next(); }, 5000); } function init() { swipe(); loop(); } // Public properties return { elSet: $(".slideshow"), next: next, swipe: swipe, loop: loop, initial: init, interval: interval } } // Create a new instance of SlideShow var slideshow = new SlideShow(); slideshow.initial(); 

Answer 3

In the swipe function, you have:

var clear = this.autorun().loop;

This expects this.autorun() to return an object, and tries to access the loop property of that object, which should contain the ID of an interval function. But autorun doesn't return anything, let alone an object with a loop property.

Change autorun to:

autorun    : function() {

            var self = this;
            var loop = setInterval(function() {

                    self.next();

                }, 5000);
            return loop;
}

Then you can do:

var clear = this.autorun();

You also shouldn't call this.autorun() in the initial function. It's already called by this.swipe() . Running it again will cause two interval functions to run, and the ID of the second one isn't saved anywhere so that you can clear it.