JavaScript offsetLeft function - slow return value (mostly IE9)

Question

I had difficulty debugging a news ticket that I wrote from scratch using JavaScript.

It works great in most browsers, in addition to IE9 (and some mobile browsers - Opera Mobile), where it moves very slowly.

Using developer tools> Profiler allowed me to find the root cause of the problem.

This is a challenge offsetLeftto determine if the ticker should be rotated, i.e. the first element becomes the last.

function NeedsRotating() {
    var ul = GetList();
    if (!ul) {
        return false;
    }
    var li = GetListItem(ul, 1);
    if (!li) {
        return false;
    }
    if (li.offsetLeft > ul.offsetLeft) {
        return false;
    }
    return true;
}

function MoveLeft(px) {
    var ul = GetList();
    if (!ul) {
        return false;
    }
    var li = GetListItem(ul, 0);
    if (!li) {
        return false;
    }
    var m = li.style.marginLeft;
    var n = 0;
    if (m.length != 0) {
        n = parseInt(m);
    }
    n -= px;
    li.style.marginLeft = n + "px";
    li.style.zoom = "1";
    return true;
}

It seems like it takes more than 300 ms to return to return the value, while the ticker is supposed to move 1 pixel to the left every 10 ms.

Is there a known fix for this?

thank

Answer 1

DOM

@samccone , GetList() GetListItem() DOM , , , DOM.

, , "" , offsetLeft.

DOM . , . . :.

var li = ul.getElementsByTagName( "li" )[ index ];

DOM. offsetLeft , DOM (, getElementsByTagName) .

, :

var offsetLeft = ul.getElementsByTagName( "li" )[ index ].offsetLeft;

offsetLeft

offsetLeft , , , ? , , offsetLeft , MoveLeft(), 0 ( - )? .

function MoveLeft( px ) {

  current_offset -= px;

offsetLeft, , - , offsetLeft , , , offsetLeft.

, ... elms [ "foo" ] ?

, offsetLeft 10 .

, - . , , , :

• :

  ( function () {
  
    var elements = {};
  
  
    function NeedsRotating() {
  
      ...
  
    }  
  
  
    function example() {
  
      // The follow var declaration will block access
      // to the outer `elements`
  
      var elements;
  
    }
  
  
    // Rest of your code here
  
  } )();
  

  elements , . . , (, NeedsRotating() ), , .

• :

  ( function () {
  
    var ticker = {};
  
    ticker.elements = {};
  
  
    // Assign a method to a property of `ticker`
  
    ticker.NeedsRotating = function () {
  
      // All methods called on `ticker` can access its
      // props (e.g. `elements`) via `this`
  
      var ul = this.elements.list;
  
      var li = this.elements.list_item;
  
  
      // Example of calling another method on `ticker`
  
      this.do_something();
  
    }  ;
  
  
    // Rest of your code here
  
  
    // Something like this maybe
  
    ticker.start();
  
  } )();
  

  , ticker .

, setTimeout :

t = setTimeout( TickerLoop, i );

:

t = setTimeout("TickerLoop();", i);

JS , setTimeout , eval.

setInterval setTimeout.

, , - , setTimeout, ?

. , . setTimeout . :

( function () {

  var offset = 100;


  var whatever = function () {

    console.log( offset );

  };


  setTimeout( whatever, 10 );

} )();

setTimeout, , this , , . :

( function () {

  var ticker = {};

  ticker.offset = 100;


  ticker.whatever = function () {

    console.log( this.offset );

  };


  setTimeout( ticker.whatever, 10 );

} )();

ticker.whatever, this ticker. :

setTimeout( function () { ticker.whatever(); }, 10 );

i.e. var ticker.SecondLiOffsetLeft = GetListItem(ul, 1).offsetLeft, offsetLeft, .

, ?

:

• offsetLeft .

• , offsetLeft DOM, getElementsByTagName(), .

# 2 , , , . , , .

" DOM", , DOM, . offsetLeft , , .

(, ), , , li . .

this.li = ul.getElementsByTagName( "li" );

, , , :

this.current_item = ###;

// or

this.li.current = this.li[ ### ];


// Then

this.li[ this.current_item ].offsetLeft

// or

this.li.current.offsetLeft

, , li :

this.li.push( this.li.shift() );

// then

this.li[0].offsetLeft

Answer 2

var li = GetListItem(ul, 1);

.. , , 10

,

elms["foo"] = elms["foo"] || selectElm(foo);

elms["foo"].actionHere(...)

Answer 3

, offsetLeft . reflow - , . , , , , . , , offsetLeft, , .

Without knowing all the details of what you are trying to do, it is difficult to understand what to recommend for better performance. http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ explains this problem in more detail and offers some tips on minimizing recalculations.