javascript - сделать setTimeout быстрее?

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

У меня переписать все функции:

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 2

В настоящее время положение изменяется на 1 пиксель каждый раз, когда slide вызывается по линии x++;. Вы можете сделать это быстрее, изменив это значение с x++ на x += 2 или x += 3 и т. Д.

Ваша анимация может выглядеть неуклюжей без какой-либо функции ослабления. Вместо этого вы должны изучить какую-то библиотеку анимации.

Answer 3

Вы должны выбрать более высокую задержку, чем 1 мс. В большинстве браузеров от 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.

Answer 4

Я получил это красиво, начиная быстро, а затем происходит медленнее, добавляя к коду следующее:

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