SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying make a text slideshow - print each element in array

    I'm trying to make basically a text slideshow, I guess you'd call it. I want to output different strings, say every 5 seconds. This is what I have so far and it works, but it outputs the quotes in machine gun fashion! I've tried using a setTimeout/Interval, but seemed to have problems getting it to work. How can I get a delay in the loop?

    Code:
    function startThingsToSayDisplay() {
    	var state = (this.checked) ? "visible" : "hidden";
    	thingstosay.style.visibility = state;
    	
    	var quotes = [
    		"string 1",
    		"string 2",
    		"string 3",
    		"string 4"
    	];
    	
    	for (var i=0; i<quotes.length; i++) {
    		//console.log(i + ' ' + quotes[i]);
    		thingstosay.innerHTML = quotes[i];
    	}
    
    }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code javascript:
    function startThingsToSayDisplay() {
    	var quotes = [
    		"string 1",
    		"string 2",
    		"string 3",
    		"string 4"
    	];
    	var state = (this.checked) ? "visible" : "hidden";
    	var thingstosay = document.getElementById('thingstosay');
    	thingstosay.style.visibility = state;
    	if (!thingstosay.quotes) {
    	    showQuotes(thingstosay, quotes, 0);
    	}
    }
    function showQuotes(el, quotes, index) {
    	el.innerHTML = quotes[index];
    	index = (index + 1) &#37; quotes.length;
    	el.quotes = setTimeout(function (i) {
    		return function () {
    		    showQuotes(el, quotes, i);
    		};
    	}(index), 1000);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks much, question for you. What is i here? It looks like it's supposed to be an index (as it's being passed back to showQuotes), but isn't i undefined?

    Quote Originally Posted by pmw57 View Post
    el.quotes = setTimeout(function (i) {
    return function () {
    showQuotes(el, quotes, i);
    };
    }(index), 1000);

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That was done to highlight the fact that the i variable is being passed in to the function from the end of it, on the last line of the code snippet that you quoted above.

    When the setTimeout function is processed, it should have no knowledge of or access to variables from within the function that it was defined. See the section titled "What can be done with Closures?" on the Javascript Closures faq page.

    I do suspect that for this particular example that going to such an extent isn't strictly necessary, so here is how it would normally be coded.

    Code javascript:
    el.quotes = setTimeout(function () {
        showQuotes(el, quotes, index);
    }, 1000);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, returning a nested function/closure, makes much more sense now, thanks!

    And yeah, it works fine without it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •