I have this code to modify but not understand the second statement in if block

Question

the second statement in the block if which is $next.addclass(type).offsetWidth is neither a call to a function neither an assignment.

if (transition) 
{ 
$next.addClass(type);
$next[0].offsetWidth; 
}
else 
{  
$active.removeClass('active');
$next.addClass('active');
}

What's the logic here?

If $next[0] is undefined, that line will raise an error. Maybe that's the logic, just a deceived assertion, preventing the script to continue if $next[0] is not set. — Sergeon, Oct 21 '16 at 20:48
some properties are only calculated when the code tries to access them (say, on a delayed layout situation), that might be the logic too, — Zig Mandel, Oct 21 '16 at 20:49
@Sergeon That would be a very stupid way of doing an assertion, I really doubt anyone would do that. — plalx, Oct 21 '16 at 21:05

score 0 · Accepted Answer · edited May 23 '17 at 12:00

offsetWidth is a measurement property that must be calculated and accessing it will cause a DOM reflow. This would be the only possible use of reading an unused value. Otherwise it's just dead code.

The code should probably have been:

if (transition) { 
    $next.addClass(type);
    forceDomReflowFrom($next[0]);
} else {  
    $active.removeClass('active');
    $next.addClass('active');
}

function forceDomReflowFrom(el) {
    el.offsetWidth;
}

Here's another related question where this approach was used to force a browser reflow (otherwise CSS animations wouldn't work).

Best answer so far! Thank you very much :) – Oct 21 '16 at 21:09 — , Oct 21 '16 at 21:09

I have this code to modify but not understand the second statement in if block

1 Answers1