SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CPU problem with setInterval

    Want to use this script but after about 15 seconds makes the CPU hit 100%. Is there a fix for the setInterval somehow that can keep it from building timers every time it runs?

    Code:
    <script type="text/javascript" charset="utf-8">
    	var scrollSpeed = 20;
    	var step = 1;
    	var current = 0;
    	var imageWidth = 2247;
    	var headerWidth = screen.width;		
    
    	var restartPosition = -(imageWidth - headerWidth);
    
    	function scrollBg(){
    		current -= step;
    		if (current == restartPosition){
    			current = 0;
    		}
    		document.getElementById('header').style.backgroundPosition = current+'px 0';
    	}
    
    	var init = setInterval("scrollBg()", scrollSpeed);
    </script>
    Maybe using clearInterval somewhere (just don't know where)? Any help would be great.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried passing all your variables as paramters of the scrollbg function? Something like this:

    <script type="text/javascript" charset="utf-8">
    var scrollSpeed = 20;
    var step = 1;
    var current = 0;
    var imageWidth = 2247;
    var headerWidth = screen.width;

    var restartPosition = -(imageWidth - headerWidth);

    function scrollBg(f_scrollSpeed, f_step, f_current, f_restartPosition){
    f_current -= f_step;
    if (f_current == f_restartPosition){
    f_current = 0;
    }
    document.getElementById('header').style.backgroundPosition = f_current+'px 0';
    }

    var init = setInterval(function() { scrollBg(scrollSpeed, step, current, restartPosition) }, scrollSpeed);
    </script>

  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried the new code but didn't scroll at all.

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes of course, didn't really think that one through, it would obviously not work as the scrollby function would keep calling the original values.... I do have another suggestion for you though. It isstill quite memory intensive, but marginally less. With the code below I am creating a scroll object, then prototyping the scrollby and setinterval. To start the scroll you instantiate a new scrollObj object and call the startScroll function:
    <script type="text/javascript" charset="utf-8">
    function scrollObj() {
    this.scrollSpeed = 20;
    this.step = 1;
    this.current = 0;
    this.imageWidth = 2247;
    this.headerWidth = screen.width;

    this.restartPosition = -(this.imageWidth - this.headerWidth);
    }

    scrollObj.prototype = {
    scrollBg: function() {
    this.current -= this.step;
    if (this.current == this.restartPosition){
    this.current = 0;
    }
    document.getElementById('header').style.backgroundPosition = this.current+'px 0';
    },
    startScroll: function(obj) {
    var init = setInterval(function() { obj.scrollBg() }, this.scrollSpeed);
    }
    }

    var myScroll = new scrollObj();
    myScroll.startScroll(myScroll);
    </script>

  5. #5
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, you may want to replace "if" with "while", as this consumes marginally less memory....

  6. #6
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One last thing: moving an img tag is much less memory intensive than changing the background position, so if you are dealing with a large image and it is possible to set it as an image rather than a background, you should see an improvement in performance....

  7. #7
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    329
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One last thing: moving an img tag is much less memory intensive than changing the background position, so if you are dealing with a large image and it is possible to set it as an image rather than a background, you should see an improvement in performance....
    Didn't know that

    --------------------------------------

    For what it's worth just another variation. Got to say though I didn't notice any abnormal cpu usage running your code. Maybe it's something else in your processes that needs checking.

    Only a few changes. Wrapped it in a function. Made headerStyle a variable so you're not calling document.getElementByID('header') each time and changed the setInterval call. Seems you don't need an anonymous function call or a less efficient string evaluation.

    Code JavaScript:
    function scroller(){
    	var scrollSpeed = 20;
    	var step = 1;
    	var current = 0;
    	var imageWidth = 2247;
    	var headerWidth = screen.width;		
    	var headerStyle = document.getElementById('header').style
    	var restartPosition = -(imageWidth - headerWidth);
     
    	function scrollBg(){
    		current -= step;
    		if (current == restartPosition){
    			current = 0;
    		}
    		headerStyle.backgroundPosition = current+'px 0';
    	}
    	var init = setInterval(scrollBg, scrollSpeed);
    }
     
    scroller();

    RLM

  8. #8
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @RLM2008: Memory-wise, I tried out your code and at least on my machine it consumed maybe a few percent more (nothing significant) more than the one I suggested, so I guess it' boils down to a stylistic choice. The main point is you should try to avoid global variables as much as possible....

    Personally I would still go for my suggestion because it gives you more room to play with and build fancy features, plus it's more easily scalable.

    Wonder what anybody else has to say on the topic. Any takers?

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might try setTimeout() instead of setInterval()

    Assuming the browser is having trouble keeping up with calling the function every X ms, setInterval() will cause the function to be called more often than if you had used setTimeout(). In that situation, the main effect is the framerate of you animation will be lower and slower, but should be more cpu friendly.

    Code:
    	function scrollBg(){
    		...
                    setTimeout(arguments.callee, scrollSpeed);
    	}
    But, this probably won't make a very large difference. The suggestions by the others should help.

  10. #10
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    329
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @RLM2008: Memory-wise, I tried out your code and at least on my machine it consumed maybe a few percent more (nothing significant) more than the one I suggested, so I guess it' boils down to a stylistic choice. The main point is you should try to avoid global variables as much as possible....

    Personally I would still go for my suggestion because it gives you more room to play with and build fancy features, plus it's more easily scalable.
    TommiChi I totally agree (forgive the rhyme)

    If I were doing it myself, likewise I would go down the OOP route.

    RLM


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
  •