jQuery, stop performing functions depending on window size, also in resize

Question

I’m working on a website that calls external JS files. The problem is that when you would like some functions to stop running on desktop when $(window).width() < 800 and vice versa:

Link to external JS/CSS files: HTML tag HEAD:

...

<link rel="stylesheet" media='screen and (min-width: 801px)' href ="css/styles.css">
<link rel="stylesheet" media='screen and (max-width: 800px)' href ="css/stylesMob.css">


<script type="text/javascript" src="js/desktopLayout.js"></script>
<script type="text/javascript" src="js/mobileLayout.js"></script>    

desktopLayout.js:

var resolucao = $(window).width() > 800 ? 'desktop' : 'mobile';
$(window).resize(function(){
    resolucao = $(window).width() > 800 ? 'desktop' : 'mobile';
    console.log(resolucao);
});

...
//funções todas aqui
...
function slide4Slider() {

if (resolucao != 'desktop') return;

$("#photosSlide4 > div:eq(0) img:gt(0)").fadeOut(0);
$("#photosSlide4 > div:eq(1) img:gt(0)").fadeOut(0);
$("#photosSlide4 > div:eq(2) img:gt(0)").fadeOut(0);

setInterval(function() { 
    $('#photosSlide4 > div:eq(0) img:eq(0)').fadeOut(800).next().fadeIn(300).end().appendTo('#photosSlide4 > div:eq(0)');
    $('#photosSlide4 > div:eq(1) img:eq(0)').fadeOut(800).next().fadeIn(300).end().appendTo('#photosSlide4 > div:eq(1)');
    $('#photosSlide4 > div:eq(2) img:eq(0)').fadeOut(800).next().fadeIn(300).end().appendTo('#photosSlide4 > div:eq(2)');
},  3000);

}

function runSiteDesktop() {

   phrasesMarginsRandomSLide1();
   pizzasSlider3Animations();
   navSlider3HoverPhrase();
   arrowsLeftRightSlide();
   sizingAndRisizing();
   navBarAnimation();
   contactFancyBox();
   logoAnimation();
   navBarSlider();
   scrollEvents();
   slide4Slider();

}

$(document).ready(function() {
    runSiteDesktop();
});

This effect occurs mainly in the functions phrasesMarginsRandomSLide1(); (slide1), slide4Slider();(slide4) and arrowsLeftRightSlide(); (left/right navigation on the side arrows).

Considering that I have no idea the section responsible for this here is the website for a better analysis, this can be seen in the animation of home page phrases after a resize any.

Answer 1

The problem is that remove the tag script HTML and its contents do not remove the script from memory. So when your resize runs you will be merging new code on top of the old one that is in memory. I made an example here: http://jsfiddle.net/wg2cdur2/ (Notice the console when you press the button);

If you need to have a responsive system that changes the code for the same user who does a resize then you will need to have a flag indicating which code to run.

Suggestion:

var resolucao = screen.width > 800 ? 'desktop' : 'mobile';
$(window).resize(function(){
    resolucao = screen.width > 800 ? 'desktop' : 'mobile';
});

And then within each function, Event Handler and other pieces of code that are different between mobile and desktop this function makes return that is to say, the execution of that line does not continue.

if (resolucao != 'mobile') return;  // usar esta verificação em código mobile
if (resolucao != 'desktop') return;  // usar esta verificação em código desktop