Question

我的代码是：

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

它通过改变backgroundPosition来旋转（？），并且它有效。但它太慢了，我想让它更快，然后逐渐减速。我怎么能这样做？

Answer 1

你应该选择比1ms更长的延迟。在大多数浏览器中，10到50毫秒会更可靠。要加快动画效果，请增加x个增量。例如：

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
}

另外，您可能希望像这样检查x： if (typeof x === 'undefined') { x = 1; }，无需var。

2018更新：查看https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame API。在固定的更新间隔内使用它通常是可取的。

Answer 2

目前，每次通过slide行调用x++;时，位置都会被更改1个像素。您可以通过将其从x++更改为x += 2或x += 3等来加快速度。

但是，如果没有某种缓和功能，你的动画可能看起来很笨拙。你应该考虑使用某种动画库。

Answer 3

我已经重写了所有功能：

  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/

Answer 4

我很快就开始了，然后通过在代码中添加以下内容来加快速度：

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

javascript - 让setTimeout更快？

4 个答案: