Timers and polmer

[Peter Frazier]

Good afternoon,

Thank you for your amazing work.  I would like to start off with an apology if I just missed the answer.  I have spent the better part of two days trying to get a setInterval(function() {}, 1000); to work in an element and I get undefined is not a function. I have tried many different ways to set this up, including stand alone functions.  I have checked out the Google community, stackTrace, and the web in general and have not found anything yet.   I do try to be exhaustive in my searching before bothering the dev's with anything.   My conclusion is either A) I'm missing something elementary.. or B) using timers is something that should be in the pages main JS file and not inside a polymer element or C) something my retaliative noob butt is completely unaware of.. below  is my code.. please be gentle its ugly and i've been trying everything i can..

thanks again, i really appreciate this amazing thing you have given the world..

  <link rel="import" href="bower_components/paper-progress/paper-progress.html">

  <link rel="import" href="bower_components/paper-button/paper-button.html">

  

  <polymer-element name="x-news" attribute="artTitle author word words index">

  

    <template>

      <style>    

        :host {

          position: absolute;

          width: 100%;

          height: 100%;

          box-sizing: border-box;

        }

        #core_card {

          position: absolute;

          width: 450px;

          height: 290px;

          border-top-left-radius: 2px;

          border-top-right-radius: 2px;

          border-bottom-right-radius: 2px;

          border-bottom-left-radius: 2px;

          box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;

          left: 60px;

          top: 30px;

          background-color: rgb(255, 255, 255);

        }

        #newsWord {

          margin: 30px 0px;

        }

        #newsControls {

          bottom: 0px;

          margin-bottom: 10px;

        }

        #articleProgress {

          margin: 25px 0px;

        }

      </style>

      <core-card id="core_card" layout vertical center>

        <h1 id="newsTitle">{{ artTitle }}</h1>

        <h5 id="newsAuthor">{{ author }}</h5>

        <p id="newsWord">{{ word }}</p>

        <div id="newsControls" layout vertical center>

          <paper-progress value="5" ratio="5" id="articleProgress"></paper-progress>

          <div id="controlsContainer" layout horizontal center>

            <paper-button label="{{ playStateLbl }}" id="btnPlay" on-tap="{{togglePlay}}"></paper-button>

            <paper-button label="Faster" id="btnFaster" on-tap="{{faster}}"></paper-button>

            <paper-button label="Slower" id="btnSlower" on-tap="{{slower}}"></paper-button>

          </div>

        </div>

      </core-card>

    </template>

  

    <script>

  

      Polymer('x-news', {

        playStateLbl: 'Play',

        playState: false,

        artTitle: 'Prez underage dog is pregnant',

        author: 'wiggles mc wiggle',

        word: 'better',

        words: ['the', 'quick', 'brown', 'fox', 'jumped', 'over', 'the', 'lazy', 'dog'],

        index: 0,

        tmr : null,

        ready: function ()  {

          this.artTitle = 'Prez underage dog is pregnant';

          this.author = 'wiggles mc wiggle';

          this.word = 'better';

          this.words = ['the', 'quick', 'brown', 'fox', 'jumped', 'over', 'the', 'lazy', 'dog'];

          this.speed = 1000;

          this.index = 0;

        },

        attributeChanged: function (attr, oVal, nVal) {},

        togglePlay: function() {

          this.playState = !this.playState;

          this.playStateLbl = this.playState ? "Pause" : "Play";

          if(this.playState) {

            tmr = setInterval(function(word, words, index) {

              this.word = this.words[this.index];

              index++;

              if(index === words.length) index = 0;

            }, 1000);

          } else {

            this.clearInterval(this.tmr);

          }

        },

        nextWord: function(word, words, index) {

          console.log('nextWord()...');

          this.word = this.words[this.index];

          this.index++;

          if(this.index === this.words.length) this.index = 0;

        },

        //setInterval: function(nextWord(this.word, this.words, this.index), 1000),

        faster: function() { this.speed += 20; console.log('speed.. ' + this.speed); },

        slower: function() { this.speed -= 20; console.log('speed.. ' + this.speed); },

        

      });

  

    </script>

  

  </polymer-element>

[Michael Bleigh]

I'm seeing at least a few issues:

1. You set tmr instead of this.tmr

2. You use this.clearInterval instead of clearInterval

3. You need to bind the interval function to the element, so that would be something like setInterval((function(){ /* do stuff */ }).bind(this), 1000);

There may be other things but those at a minimum would need to be fixed before it would work.