Chaining similar elements modification by time interval

Question

I have a given list of p elements on my html code. On page load, I try to queuing modifications of each <p> elements's content by a given interval of time (1sec).

Given the html:

<p>I want to change first!</p>
<p>I want too!</p>
<p>Me 3rd !</p>
<p>Hey, don't forget me!</p>

the CSS:

p { padding: 2px 5px 0px 10px; }
.p { color: #999; }
.green { color:green; border-bottom: 1px solid #888; background: #EEE; }

What should be the JS to since I want to chain up modification. Literally: the first p sentence to be CSS / HTML modified first, 1sec later the 2nd line should be replaced, 1sec later the 3rd line, 4sec later the 4th line, etc.

$("p").ready(function(){
    setInterval(function () {
        $('p').text('aaaahhhhh.... happy!')
    }, 1000);
  });

That's fail (fiddle).

What I am doing wrong ? should I use a for loop, each(), instead of selector + setInterval ? please forward keywords so I may dig in the relevant docs. Fiddle appreciate~

Rohan Kumar · Answer 1 · 2013-02-08T11:58:52.463

2

Try this

$(document).ready(function(){
    var st=null;
    var i=0;
    st=setInterval(function () {
        $('p').eq(i).text('aaaahhhhh.... happy!'); 
        if(i==$('p').length-1)// one less because i initialised by 0.
            clearTimeout(st);
        i++
    }, 1000);
});

Check live demo here http://jsfiddle.net/gT3Ue/14/

edited Feb 08 '13 at 11:58

answered Feb 08 '13 at 11:52

Rohan Kumar

40,431
11
76
106

@Hugolpz I think this is what you want. – Rohan Kumar Feb 08 '13 at 12:07

score 2 · Answer 2 · answered Feb 08 '13 at 13:01

2

(function next($set, i) {
  setTimeout(function () {
    $set.eq(i).text('aaaahhhhh.... happy!');
    if (i < $set.length - 1) {
      next($set, i + 1); 
    }  
  }, 1000);
//    /\
//    ||------ the delay
}($('p'), 0));
//  /\    /\
//  ||    ||-- the starting index
//  ||----- -- your set of elements

demo: http://jsbin.com/otevif/1/

answered Feb 08 '13 at 13:01

Yoshi

54,081
14
89
103

Cleaner-better working sample [on fiddle](http://jsfiddle.net/hugolpz/gT3Ue/19/) Thanks Yoshi! – Hugolpz Feb 08 '13 at 22:34
function + function's call + less & inline comments : better for newbies like me. – Hugolpz Feb 09 '13 at 12:21
1

Note: In my project I actually use your code, but my begginer-friendly version. Your current syntaxe is just odds [too short] for newbies like me. Let's display [both versions](http://jsfiddle.net/hugolpz/gT3Ue/20/) in your answer, so both begginer and advanced users will love it [and I validate it]. – Hugolpz Feb 09 '13 at 12:40

Adil · Answer 3 · 2013-02-08T11:54:13.390

1

Your interval is working use append instead of text to see the effect. Use document.ready not $("p").ready

Live Demo

$(document).ready(function(){
    setInterval(function () {
        $('p').append('aaaahhhhh.... happy!')
    }, 1000);
  });

Live Demo

  i = 0;
$(document).ready(function () {
    div1 = $('#div1');
    parry = $("p");
    setInterval(function () {
        div1.append(parry.eq(i++).text() + '<br />')
        if (i > 3) i = 0;
    }, 400);
});

edited Feb 08 '13 at 11:54

answered Feb 08 '13 at 11:35

Adil

146,340
25
209
204

Error of explaination. I want the first p sentence to be replaced, 1sec later the 2nd line, 1sec later the 3rd line, 4sec later the 4th line. – Hugolpz Feb 08 '13 at 11:44
Update my answer, I hope if it is not exactly you are going for still till will help you to do that. – Adil Feb 08 '13 at 11:54
I learned a bit with your fiddle, thanks Adil for your jump in~ – Hugolpz Feb 08 '13 at 14:13

fragmentedreality · Accepted Answer · 2013-02-08T15:14:52.873

1

    function modifyTargetDeferred(target) {
        target.first().text('ahhh... happy');
        if (target.length > 1) {
            setTimeout(function() {
                modifyTargetDeferred(target.not(':first'));
            }, 1000);
        }
    }

    setTimeout(function() {
        modifyTargetDeferred($('p'));
    }, 1000);

edited Feb 08 '13 at 15:14

answered Feb 08 '13 at 13:47

fragmentedreality

1,287
9
31

I made [a fiddle of your code](http://jsfiddle.net/hugolpz/gT3Ue/15/). I find your code more elegant, but I don't see limits. Is the function running forever ? / when does your function stop ? (note: I'am new to JS) – Hugolpz Feb 08 '13 at 14:29
I must admit, I find @Yoshi's answer the most elegant way. Just had mine prepared before lunch and did not want to waste it :-D. The limit is the check for the length of the objects-array. Every iteration the objects without the first element are passed until all objects are gone. – fragmentedreality Feb 08 '13 at 15:05
@Hugoplz, I applied your suggested edit's as it got rejected for unknown reasons. I just didn't get the css-stuff as you did not ask about it and so left it out. – fragmentedreality Feb 08 '13 at 15:16

Chaining similar elements modification by time interval

4 Answers4