title: window onresize perform actions on breakpoints in Jquery
body: <p>What I would like to do is create window breakpoints, like <code>300, 400, 500</code>
  and perform a certain action when the window reaches a certain breakpoint, ideally could be something like:<br></p>
  
  <pre><code>300: function(){...}
  400: function(){...}
  500: function(){...}
  </code></pre>
  
  <p>and the following code is how I tried to <strong>fire only 1 time</strong> a certain function associated to a certain breakpoint, but actually I'm stuck because I don't know how to pass them dynamically inside a single little function, and because all breakpoints in my code look pretty the same and they are useless repeated...</p>
  
  <pre><code>breakpoints = [300, 400, 500];
  
  function screenBreakpoints(){
      var regex = / ?breakpoint[0-9] ?/;
      if( $(window).width() &lt; breakpoints[0] ){
          if( !$('html').hasClass('breakpoint0') ){
              $('html')[0].className = $('html')[0].className.replace(regex, '');
              $('html').addClass('breakpoint0');
              console.log('breakpoint0');
              $('li.MOVING').insertBefore('ul li.one'); // breakpoint function (fires only one time)
          }
      }
      else if( $(window).width() &gt; breakpoints[0] &amp;&amp; $(window).width() &lt; breakpoints[1] ){
          if( !$('html').hasClass('breakpoint1') ){
              $('html')[0].className = $('html')[0].className.replace(regex, '');
              $('html').addClass('breakpoint1');
              console.log('breakpoint1');
              $('li.MOVING').insertBefore('ul li.two'); // breakpoint function (fires only one time)
          }
      }
      else if( $(window).width() &gt; breakpoints[1] &amp;&amp; $(window).width() &lt; breakpoints[2] ){
          if( !$('html').hasClass('breakpoint2') ){
              $('html')[0].className = $('html')[0].className.replace(regex, '');
              $('html').addClass('breakpoint2');
              console.log('breakpoint2');
              $('li.MOVING').insertBefore('ul li.three'); // breakpoint function (fires only one time)
          }
      }
      else if( $(window).width() &gt; breakpoints[1] ){
          if( !$('html').hasClass('breakpoint3') ){
              $('html')[0].className = $('html')[0].className.replace(regex, '');
              $('html').addClass('breakpoint3');
              console.log('breakpoint3');
              $('li.MOVING').insertBefore('ul li.four'); // breakpoint function (fires only one time)
          }
      }
  }
  
  $(window).resize(function(){
      screenBreakpoints();
  });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/6vn1zk2f/" rel="nofollow">FIDDLE</a></strong></p>