JQuery resize (), scroll (): good practice for using variables?

In general, you should avoid doing anything inside the callback that was triggered by the event scroll

, because the callback will be executed for every pixel that is scrolled in the window. However, depending on the application you are building, some things simply cannot be eliminated inside this callback.

Doing a lot of "expensive" manipulations or queries inside a scroll callback can freeze the browser completely and render your application unusable, so you have to be very careful and careful about performance.

Here are some examples of good practices.

General example:

Live example: http://jsfiddle.net/tfjyf0a3/

// Since we can get away with querying the elements outside of the callback 
// our application will be a lot snappier because we're doing less work for 
// every scrolled pixel. Always query DOM elements outside if possible.
var $output = $('#output');
var $window = $(window);

// This function is executed for every scrolled pixel, so we need to 
// avoid doing "expensive" queries or changing the DOM in here too.
function changeFontSize(scrollNumber) {
  // Setting the fontSize here is unavoidable because our application needs it. 
  $output.css('fontSize', scrollNumber <= 50 ? 18 : Math.floor(scrollNumber/10));
}

$window.on('scroll', function() {
  // Since `$(this)` here would be the window object, it better to 
  // just use the previous reference named `$window`.
  // Querying the scrolled position here is unavoidable because our 
  // application needs it.
  var currentScroll = $window.scrollTop();

  // Saving a reference of the `scrollTop()` value is better when 
  // we need to re-use its value.
  $output.html(currentScroll + 'px');

  // We have to be cautious inside this function as well.
  changeFontSize(currentScroll);
});


// This is a good practice when you need to guarantee the execution of the function 
// when there isn't enough content in the body to cause a scrollbar in the Browser. 
// 
// The 'scroll' event will fire only when there is a scrollbar in the Browser.
$window.scroll();

      

        
        
        
      

    

Sometimes you will need to do expensive DOM manipulations, requests, or even Ajax requests inside a scroll callback. For example, imagine building an application that implements a pattern known as infinite loading. In this application, when the user has approached the bottom of the page by scrolling quickly or slowly, you will need to do the following:

• Check if the user is scrolling to the bottom.
• Check if there are more resources to download.
• Download resources.
• Add new resources to the DOM.

You definitely don't want to follow all the steps above on every pixel you scroll. It is very good practice for this situation to delay the above steps. An example might look like this:

Deferred execution:

Live example: http://jsfiddle.net/35qb1b88/

var $output = $('#output');
var $window = $(window);
var timer;

function changeFontSize(scrollNumber) {
  $output.css('fontSize', scrollNumber <= 50 ? 18 : Math.floor(scrollNumber/10));

  // ...
  // load resources
  // append in DOM
  // ...etc
}

function scrollHandler() {
  var currentScroll = $window.scrollTop();

  $output.html(currentScroll + 'px');
  changeFontSize(currentScroll);
}

// This callback will be executed for every pixel but it will 
// do nothing if we're scrolling too fast because we're clearing
// the timeout. Only when scrolling has stopped and at least 100
// milliseconds have passed will the `scrollHandler` function run.
$window.on('scroll', function() {
  timer && window.clearTimeout(timer);
  timer = window.setTimeout(scrollHandler, 100);
});

$window.scroll();

      

        
        
        
      

    

The same principles apply to an event resize

.