www.webdeveloper.com
Results 1 to 9 of 9

Thread: Successivly using setInterval to change width/height (animate) divs not working

Hybrid View

  1. #1
    Join Date
    Jul 2013
    Posts
    7

    Successivly using setInterval to change width/height (animate) divs not working

    When I run the following script, I intend for the first div's width and height to change until the condition is met that causes clearInterval to trigger. I then want the second div's width and height to change until the condition is met that causes clearInterval to trigger. I then want the script to end.

    What's actually happening is that both divs are 'growing' at the same time and then the first div endlessly resizes...

    function growDiv() {
    divWidth = 0
    divHeight = 0
    timer = setInterval("animate('div1')",20)
    timer = setInterval("animate('div2')",20)

    }

    function animate(div) {
    divWidth += 5
    divHeight += 5
    S(div).width = divWidth
    S(div).height = divHeight
    if (divWidth == 100) {
    clearInterval(timer)
    divWidth = 0
    divHeight = 0
    }
    }

    growDiv is called by a button press. The way I figured this would work is that when timer 'starts' for the first time, animate() is called until the condition to terminate the loop is met. Once terminated the call to this function would end and we would return to growDiv to continue to the second timer and thus the second call to animate(div2). Once THIS then finishes we would return back to growDiv again and with no script left to process the function would end.

    Can someone explain to me how this ACTUALLY works?

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Code:
    timer = setInterval("animate('div1')",20)
        timer = setInterval("animate('div2')",20)
    What is timer storing?
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Jul 2013
    Posts
    7
    I thought that by using 'variable = setInterval(..)' you can then use clearInterval on that variable. Otherwise I don't believe it serves a purspose? Once the setInterval starts doesn't it just effectively start looping the function that it calls?

  4. #4
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by stoolpigeon View Post
    I thought that by using 'variable = setInterval(..)' you can then use clearInterval on that variable.
    Yes that's true but it's not what you have allowed to happen.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  5. #5
    Join Date
    Jul 2013
    Posts
    7
    Ok so I think my problem is that once the first timer = setInterval(..) starts, I was assuming that this would be completed before the second timer = setInterval(..) starts. I think that assumption was incorrect?

    I'm now trying to ensure that the first completes before the second 'loop' begins, via three functions. I think I may have some syntax issues however:

    function grow() {
    for (i=1;i<3;i++)
    growDiv('div' + i)
    }

    function growDiv(div) {
    divWidth = 0
    divHeight = 0
    timer = setInterval("animate(div)",20)
    }

    function animate(div) {
    divWidth += 5
    divHeight += 5
    S(div).width = divWidth
    S(div).height = divHeight
    if (divWidth == 100) {
    clearInterval(timer)
    timer = null
    divWidth = 0
    divHeight = 0
    grow()
    }
    }

    Is this the correct strategy for this problem?

  6. #6
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Code:
    Ok so I think my problem is that once the first timer = setInterval(..)  starts, I was assuming that this would be completed before the second  timer = setInterval(..) starts. I think that assumption was incorrect?
    Indeed it is and your new code has effectively the same problem.

    Like any variable, timer is storing the last value assigned to it.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  7. #7
    Join Date
    Jun 2008
    Posts
    106
    setInterval (and setTimeout) use different execution contexts. If you put 2 in a row, like you've done here, then it will create 2 additional contexts that run simultaneously beside your script.
    I'm not great at explaining, but, if you can imagine... the first interval is called which creates new execution context. The script does not wait for the interval to be finished/cleared before continuing with the script. Then the next line will get evaluated, which creates another interval and sets to the same timer variable. So in 30ms, both animate(div1) and animate(div2) will get called. But since you overwrote the first interval's reference with the second, the second interval is the only one you were able to clear.

    So, bad explanation out of the way, what I would most likely do is create a little queue system where it goes through each of the elements you supply and animates all of them.
    Here's some example code: http://pastebin.com/defjySFB
    It's untested, of course, but try it out.

    And in the future, please properly indent your code and add semicolons where they should be added.

  8. #8
    Join Date
    Jul 2013
    Posts
    7
    Thanks both for the help/explanations. How do I indent my code? Do I wrap it in or some such? Thanks.

  9. #9
    Join Date
    Jun 2008
    Posts
    106
    By pressing tab.

    You can use a good text editor to help with indentation. I use Notepad++, personally.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles