To prevent a script from executing according to the screen resolution, is my code correct?

Doubt 1

  

The only problem is that the page needs to be loaded, otherwise the script will not be updated. In other words, when I reduce the window to 500, for the conditional to work I must update the page

Effectively, if the conditional is evaluated when loading the page, it will not be evaluated again until it is reloaded. If you want to force it to be re-evaluated you can put a listener to the window object that is triggered when the screen is resized.

window.addEventListener('resize',function() { 
  miFuncion(); 
});

Now, you have to think carefully about what you want to happen when you call miFuncion or, better, think about your page so that the animations do not depend on the initial resolution but on the current resolution after a resizing.

On the other hand, given your assumption:

  

I do not expect the person to resize his window, but to enter with a resolution already established

We could say that you do not really need help or it is not clear what you are asking.

Doubt 2

  

Enter all my code (which is> medium, there are 5 animations) inside the conditional will not the page > slower? (or has nothing to do ??)

If you mean that the mobile version will load a segment of inactive text without purpose, it will be less than optimal but it will not be noticed.

Doubt 3

  

If someone has a better way of doing what I am trying,   please tell me

For purposes of what you want, instead of my suggestion above it would make more sense to reconsider your current flow:

if(window.width > 500 ) {
   function animacion1() {
     ...
   }

   function animacion2() {
     ...
   }

   function animacion3() {
     ...
   }
}

And rewrite it as

function animacion1() {
  if (window.width <= 500) {
    return false;
  }
  //... código
}

function animacion2() {
  if (window.width <= 500) {
    return false;
  }
  //... código
}

function animacion3() {
  if (window.width <= 500) {
    return false;
  }
  //... código
}

So there is no flow to "turn off" or "turn on" the animations (which in this case would be, I imagine, associated with certain listeners), but each one will short-circuit if it detects a mobile resolution.

Another idea:

On the other hand, you also have to ask yourself if it is necessary to use javascript for the animation. Much of what JS required years ago today can be done with CSS, and using media queries you can make certain CSS behaviors apply only at certain resolutions without detecting a resize event. Basically they would be responsive animations.

For example:

• Using a listener , when clicking on a top menu option, a collapsible is displayed
  • With javascript: the handler manipulates the position of the collapsible and its visibility. If the resolution is less than 500 there is no movement but only appears
  • With CSS: the handler only adds or removes a class, the style that is applied manages the animation natively. With an average query I control if I want there to be a fluid or instantaneous movement. If the resolution is less than 500 , the JS does not matter: that is the CSS problem.

Another example:

• When I hover over an icon, I want a tooltip to be displayed
  • with JS: add a listener to the event mouseOver and manipulate the DOM by altering the visibility of the tooltip. If the resolution is less than 500 , return false and there is no tooltip.
  • With CSS: I use the pseudo-selector :hover to modify the behavior (and visibility) of the nodes that are children of the element (and in this case, the tooltip should be a child of the element). If the resolution is less than 500 I can inhibit that behavior with a half query.

In summary, there are animations that require JS necessarily to add a listener. I would say that unless you add or remove classes, that listener should not touch the DOM to add transitions or animations.