javascript - Call a method inside an object with setInterval is not working - Stack Overflow

admin管理员组

文章数量:1414614

I am trying to poll my server using a method inside my object using the setInterval() function. The code looks like this:

(function(){

    var teacherZone = {

        init: function(){
            this.cacheDOM();
            this.bindEvents();
            this.pollServer(); // get the list of lessons
        },
        cacheDOM: function(){
            this.$showLessons     = $('#showLessons');
            this.$lessonsTemplate = $('#lessonsTemplate');
        },
        bindEvents: function(){

        },
        pollServer: function(){
            alert('Polled');
        }

    }

    teacherZone.init();
    setInterval(teacherZone.pollServer(), 1000)
})();

This calls the alert() twice but then no more. Not sure where I am going wrong here.

How do I repeatedly call a method inside an object at a set interval?

UPDATED CODE:

(function(){

    var teacherZone = {

        interval: 5000,

        init: function(){
            this.cacheDOM();
            this.bindEvents();
            setInterval(function(){
                teacherZone.pollServer(); // get the list of lessons
            }, teacherZone.interval);
        },
        cacheDOM: function(){
            this.$showLessons     = $('#showLessons');
            this.$lessonsTemplate = $('#lessonsTemplate');
        },
        bindEvents: function(){

        },
        pollServer: function(){
            alert('Polled');
            // data = {
            //     name: 'John'
            // };
            // this.$showLessons.html(Mustache.render(this.$lessonsTemplate.html(), data));
        }

    }

    teacherZone.init();
    teacherZone.pollServer();

})();

I am trying to poll my server using a method inside my object using the setInterval() function. The code looks like this:

(function(){

    var teacherZone = {

        init: function(){
            this.cacheDOM();
            this.bindEvents();
            this.pollServer(); // get the list of lessons
        },
        cacheDOM: function(){
            this.$showLessons     = $('#showLessons');
            this.$lessonsTemplate = $('#lessonsTemplate');
        },
        bindEvents: function(){

        },
        pollServer: function(){
            alert('Polled');
        }

    }

    teacherZone.init();
    setInterval(teacherZone.pollServer(), 1000)
})();

This calls the alert() twice but then no more. Not sure where I am going wrong here.

How do I repeatedly call a method inside an object at a set interval?

UPDATED CODE:

(function(){

    var teacherZone = {

        interval: 5000,

        init: function(){
            this.cacheDOM();
            this.bindEvents();
            setInterval(function(){
                teacherZone.pollServer(); // get the list of lessons
            }, teacherZone.interval);
        },
        cacheDOM: function(){
            this.$showLessons     = $('#showLessons');
            this.$lessonsTemplate = $('#lessonsTemplate');
        },
        bindEvents: function(){

        },
        pollServer: function(){
            alert('Polled');
            // data = {
            //     name: 'John'
            // };
            // this.$showLessons.html(Mustache.render(this.$lessonsTemplate.html(), data));
        }

    }

    teacherZone.init();
    teacherZone.pollServer();

})();

• javascript
• jquery

Share Improve this question Follow edited Feb 22, 2017 at 16:26 Jethro Hazelhurst asked Feb 22, 2017 at 16:00 Jethro HazelhurstJethro Hazelhurst 3,29577 gold badges4242 silver badges8585 bronze badges 1

• You know what is the difference between a function reference and a function call? – Teemu Commented Feb 22, 2017 at 16:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You need to remove the parenthesis, because you call the function immediately and do not hand over the function.

setInterval(teacherZone.pollServer, 1000)
//                               ^^

You have to pass a reference to the function to setInterval like this:

setInterval(teacherZone.pollServer, 1000);

If you want to be able to use this inside the function pollServer, then you'll have, either, to bind this to your object using bind like this:

setInterval(teacherZone.pollServer.bind(teacherZone), 1000);

or wrap the call to pollServer inside an anonimous function like this:

setInterval(function() {
    teacherZone.pollServer();
}, 1000);

because if you don't then this will be the parent object of setInterval which is the window object.

Edit:

You can do it in simple way, in case you have to create more instances of teacherZone or rename the object teacherZone you won't need to rename all the lines that depends on it. Just simply store the value of this outside setInterval (read about closures) like this:

init: function(){
    this.cacheDOM();
    this.bindEvents();
    var that = this;       // store this here so it will be accessible inside setInterval
    setInterval(function(){
        that.pollServer(); // use that here (because this will be the window object here so we use that because it holds a reference to the object we want)
    }, this.interval);     // no need to use that here just this will suffice (because here we are inside init not inside the callback of setInterval)
},

Now you can rename the object teacherZone without worrying!

You need a function reference instead of calling the function.

Change From: setInterval(teacherZone.pollServer(), 1000)
To" setInterval(teacherZone.pollServer, 1000)

(function(){

    var teacherZone = {

        init: function(){
            this.cacheDOM();
            this.bindEvents();
            this.pollServer(); // get the list of lessons
        },
        cacheDOM: function(){
            this.$showLessons     = $('#showLessons');
            this.$lessonsTemplate = $('#lessonsTemplate');
        },
        bindEvents: function(){

        },
        pollServer: function(){
            alert('Polled');
        }

    }

    teacherZone.init();
    setInterval(teacherZone.pollServer, 1000)
})();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can also try this way :

(function(){ 
   $.teacherZone = { 
    init: function(){
        this.cacheDOM();
        this.bindEvents();
        this.pollServer(); 
    },
    cacheDOM: function(){
        this.$showLessons     = $('#showLessons');
        this.$lessonsTemplate = $('#lessonsTemplate');
    },
    bindEvents: function(){

    },
    pollServer: function(){
        console.log('Polled');
    } 
  } 
 $.teacherZone.init(); 
 setInterval($.teacherZone.pollServer, 1000);

})(); 

本文标签： javascriptCall a method inside an object with setInterval is not workingStack Overflow