By JVE999


2013-09-05 22:26:25 8 Comments

I'm trying to make a few things scroll down the screen in javascript, however, upon execution, it just says a little and displays everything at once. So it's not clearing with the $("#Menu").html('') function and the setTimeout(function {},500) is just setting a timeout for the entire page instead of the code segment.

var MenuData = [
{'Name':'pictures','x':'30'},
{'Name':'blog','x':'50'},
{'Name':'contact','x':'42'}
]
;  


var PositionArray = new Array();
$(document).ready(function () {
    for (var count = 0; count < 1000; count++) {
        $("#Menu").html('');
        if (PositionArray[count] != null) {
            PositionArray[count]++;
        } else {
            PositionArray[count] = 0;
        }

        setTimeout(function () {
        for (var i in MenuData) {
                $("#Menu").append('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
            }
        }, 500);

    }
});

Here's the fiddle: http://jsfiddle.net/LbjUP/

Edit: There was a little bit of error in the code that doesn't apply to the question. Here's the new one: http://jsfiddle.net/LbjUP/1/, I just moved PositionArray[count] to the setTimeout function as PositionArray[i]

2 comments

@collapsar 2013-09-05 22:45:44

Try

function recurse ( cnt ) {
    for (var i in MenuData) {
        $("#Menu").append('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
    }
    if (cnt < 1000){
       setTimeout(function () { recurse(cnt + 1); }, 500);
    }
}

$("#Menu").html('');
if (PositionArray[count] != null) {
    PositionArray[count]++;
} else {
    PositionArray[count] = 0;
}
recurse(0);

@Bergi 2013-09-05 22:37:31

As stated in the comments, you are creating 1000 timeouts for 500 ms at the same time - after 500 ms all of them will be executed. What you want is to increase the timeout for every scheduled function:

setTimeout(function() {
    // do something
}, count * 500);

However, creating 1000 timeouts at once is not a that good idea. It would be better to use setInterval or call setTimeout "recursively" until a count of 1000 is reached, so that you only have one active timeout at a time.

var count = 0;
function update() {
    // do something
    if (++count < 1000)
        setTimeout(update, 500);
    // else everything is done
}
update();

Also, if you intend to create timeouts in a loop, be sure to be familiar with closures and their behavior when accessing counter variables after the loop ran.

@JVE999 2013-09-05 22:39:04

Setting setTimeout recursively is what I'd like to do. That would require pausing after each setTimeout or something that does the same thing. How would I do that? I was under the impression setTimeout pauses the code, procedurally, which apparently it doesn't.

@Bergi 2013-09-05 22:43:52

No. setTimeout does asynchronically schedule the execution of the given function for the specified time, and returns immediately. It is not a sleep function, which would freeze the whole browser UI.

@JVE999 2013-09-05 22:46:41

Alright. I tried the first method and it did pretty much the same thing, although it seemed to delay or something a bit more: jsfiddle.net/LbjUP/2 I've done functions similar to the second, so it should work, I'm going to try it out.

Related Questions

Sponsored Content

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

6 Answered Questions

[SOLVED] Why does Google prepend while(1); to their JSON responses?

36 Answered Questions

[SOLVED] How can I display a JavaScript object?

9 Answered Questions

[SOLVED] Why does ++[[]][+[]]+[+[]] return the string "10"?

  • 2011-08-26 08:46:14
  • JohnJohnGa
  • 190463 View
  • 1550 Score
  • 9 Answer
  • Tags:   javascript syntax

25 Answered Questions

[SOLVED] How does JavaScript .prototype work?

12 Answered Questions

5 Answered Questions

[SOLVED] What is TypeScript and why would I use it in place of JavaScript?

  • 2012-10-02 16:37:58
  • Mohammed Thabet
  • 444104 View
  • 1492 Score
  • 5 Answer
  • Tags:   javascript typescript

17 Answered Questions

[SOLVED] Why is setTimeout(fn, 0) sometimes useful?

16 Answered Questions

[SOLVED] Why would a JavaScript variable start with a dollar sign?

Sponsored Content