setIntervalが機能していないオブジェクト内のメソッドを呼び出す

Question

setInterval()関数を使用してオブジェクト内のメソッドを使用してサーバーをポーリングしようとしています。コードは次のようになります。

(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) 
})(); 

これはalert（）を2回呼び出してからもう一度呼び出します。私がどこに間違っているのか分かりません。

オブジェクト内のメソッドを一定の間隔で繰り返し呼び出すにはどうすればよいですか？

更新されたコード：

(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(); 

})(); 

Answer 1

あなたはこのようなsetIntervalに関数への参照を渡す必要があります：

setInterval(teacherZone.pollServer, 1000); 

あなたが機能pollServer内thisを使用することができるようにしたい場合は、あなたがあなたにthisをバインドするために、いずれか、持っています

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

またはこのようなanonimous関数内pollServerへの呼び出しをラップ：

このような bindを使用してオブジェクト

thisは、オブジェクトのsetIntervalの親オブジェクトになります。

編集：

あなたは簡単な方法でそれを行うことができ、場合にあなたはteacherZoneの複数のインスタンスを作成するか、それに依存してすべての行の名前を変更する必要はありませんteacherZoneオブジェクトの名前を変更する必要があります。単にsetInterval外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) 
}, 

は今、あなたは気にせずにオブジェクトteacherZoneの名前を変更することができます！

Answer 2

あなたはすぐに関数を呼び出すと機能を手渡すしていないので、かっこを削除する必要があります。

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

Answer 3

関数を呼び出す代わりに関数参照が必要です。

変更 ：setInterval(teacherZone.pollServer(), 1000)
へ」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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

あなたもこの方法を試すことができます。

(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); 

})();