javascript - make setTimeout faster?

Question

My code is:

function slide(x) 
{
    if (x==undefined)
      var x = 1;
    if (x >= 4096) 
      return;

    document.getElementById("slide").style.backgroundPosition = x + "px 0px";
    x++;
    setTimeout(function() {
        slide(x);
    }, 1);
}

JSFIDDLE

It makes a spin (?) by changing backgroundPosition, and it works. But it's too slow, I'd want to make it faster, and then gradually slow down. How can I do that?

Clicking on the button in the Fiddle doesn't do anything for me — Matthew Herbst
– Matthew Herbst, Commented Dec 22, 2015 at 19:29
Make your steps bigger. For example, x = x + 5 instead of x++ — Roman Granovsky
– Roman Granovsky, Commented Dec 22, 2015 at 19:30

Mario Tacke · Accepted Answer · 2018-05-23 14:05:42Z

2

You should pick a higher delay than 1ms. In most browsers 10 to 50 ms would be a lot more reliable. To speed up your animation though, increase x increments. For example:

function slide(x) 
{
    if(x==undefined) var x = 1;
    if(x >= 4096) return;
    document.getElementById("slide").style.backgroundPosition = x+"px 0px";
    x += 10; // or some other value
    setTimeout(function() {
        slide(x);
    }, 50); // or some other value
}

Also, you probably want to check x like this: if (typeof x === 'undefined') { x = 1; }, no need for var.

2018 UPDATE: Check out the https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame API. Using this over a fixed update interval is usually preferable.

edited May 23, 2018 at 14:05

answered Dec 22, 2015 at 19:33

Mario Tacke

5,5073 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Draco18s no longer trusts SE Over a year ago

50ms makes the animation look choppy. 50ms is only 20 frames per second, the human eye doesn't really start to see things as "moving" until about 26.

zqk Over a year ago

That worked, thanks. And how can I make it slowing at the end?

Draco18s no longer trusts SE Over a year ago

@zqk check Baro's answer.

Mario Tacke Over a year ago

@zqk, try to use an animation library such as GSAP's TweenLite/TweenMax or jQuery UI

Baro · Accepted Answer · 2015-12-22 19:36:26Z

1

I have rewrite all the function:

  function slide() {
    var x = 1;
    var y = 30;
    var clr = setInterval(function(){
      if(x >= 4096) x = 1;
      document.getElementById("slide").style.backgroundPosition = x+"px 0px";
      x+=y;
      y-=0.1;
      if (y<=0) { clearInterval(clr); }
    },10);

  }

https://jsfiddle.net/tatrwkmh/4/

answered Dec 22, 2015 at 19:36

Baro

5,5932 gold badges21 silver badges43 bronze badges

Comments

Comptonburger · Accepted Answer · 2015-12-22 19:30:41Z

1

Currently the position is being changed by 1 pixel every time slide is called, via the line x++;. You can make it faster by changing this from x++ to x += 2 or x += 3 etc.

Your animation may look clunky without some sort of easing function, though. You should look into using some sort of animation library instead.

answered Dec 22, 2015 at 19:30

Comptonburger

5943 silver badges10 bronze badges

Comments

yyf · Accepted Answer · 2015-12-22 19:42:25Z

1

I got it nicely starting fast and then going slower by adding to your code the following:

if(x < 1000)
    x+=2
else if(x < 1500)
    x+=1.5
else
    x++;

answered Dec 22, 2015 at 19:42

yyf

255 bronze badges

Collectives™ on Stack Overflow

javascript - make setTimeout faster?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related