javascript setInterval работает медленно в ie8

#javascript

#javascript

Вопрос:

1) chrome, firefox работает нормально, но медленно в IE8

2) очень медленно после увеличения / уменьшения масштаба браузера, изменения размера и т. Д

3) почему? утечка памяти? или ?

 function moveX(object, coord){
    var v = (coord < 0) ? -1 : 1;

    var timer = setInterval(function(){
        var x = object.offsetLeft   v;
        v *= 2;

        if((v < 0 amp;amp; x > coord) || (v > 0 amp;amp; x < coord))
            object.style.left = x   "px";
        else{
            clearInterval(timer);
            object.style.left = coord   "px";
        }
    }, 25);
}
  

Комментарии:

1. ie8 отстой, ему уже 5 лет, javascript работает медленно в ie8. tomshardware.com/reviews /…

2. Насколько быстро работает javasript, вероятно, здесь не имеет значения.

3. Вероятно, вы правы, если только сама их машина не отстой, независимо от того, что IE8 отстой, он медленно выполняет действия на странице.

4. Если moveX вызывается несколько раз, он запускает несколько таймеров. Убедитесь, что этого не происходит.

5. Покончите с IE8, если нет какой-либо реальной причины для его поддержки.

Ответ №1:

Во-первых, как упоминалось в комментариях, убедитесь, что несколько таймеров не запущены одновременно. Далее, отсутствие необходимости offsetLeft вычисления каждый раз также может обеспечить значительное ускорение.

 function moveX(object, coord) {
    var v = coord < 0 ? -1 : 1;
    var x = object.offsetLeft;

    var timer = setInterval(function () {
        x  = v;
        v *= 2;

        if ((v < 0 amp;amp; x > coord) || (v > 0 amp;amp; x < coord)) {
            object.style.left = x   "px";
        } else {
            clearInterval(timer);
            object.style.left = coord   "px";
        }
    }, 25);
}
  

Кроме того, ваше движение зависит от того, сколько времени требуется для тикающего таймера; любые различия в производительности можно сгладить, используя исключительно time (хотя вы не можете сделать это правильно в IE 8; нет монотонного API таймера):

 function moveX(object, coord) {
    var v = coord < 0 ? -1 : 1;
    var startX = object.offsetLeft;
    var start = new Date().getTime();

    var timer = setInterval(function () {
        var t = new Date() - start;
        var x = startX   v * Math.pow(2, t / 25);

        if ((v < 0 amp;amp; x > coord) || (v > 0 amp;amp; x < coord)) {
            object.style.left = x   "px";
        } else {
            clearInterval(timer);
            object.style.left = coord   "px";
        }
    }, 25);
}
  

Однако это происходит за счет реальной производительности.