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.
On Thursday, July 3, 2014 1:25:00 PM UTC-7, Peter Frazier wrote:
>
> 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>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/165b0653-a0f7-42d7-813f-9bd8e744f569%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
