jQuery: addClass only once

Question

I have an addClass and removeClass function running on window resize, using an if else statement. The markup is as follows:

$(window).load(function() {
  resize();
});

//Every resize of window
$(window).resize(function() {
  resize();
});

//Dynamically assign height
function resize() {
  // Handler for .ready() called.
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        windowHeight = windowWidth / 1.7777;

        var loadwindowHeight = $(window).height(),
            loadspriteHeight = $('.spritespin-canvas').height();

            if(loadspriteHeight < loadwindowHeight) {
                $('.spritespin-canvas').addClass('height');
            } else {
                $('.spritespin-canvas').removeClass('height');
            }

}

The only problem is, when you resize the window, it keeps repeatedly adding and removing the class, it it possible to run the addClass and removeClass functions once? Any suggestions would be greatly appreciated!

Answer 1

You can use .hasClass .

var hasHeightClass = $('.spritespin-canvas').hasClass('height');
if (loadspriteHeight < loadwindowHeight && !hasHeightClass) {
    $('.spritespin-canvas').addClass('height');
} else if (hasClass) {
    $('.spritespin-canvas').removeClass('height');
}