title: Problem with function within $(window).resize - using jQuery
body: <p>I want to use a simple function to hide/show content <strong>only</strong> on mobile devices.<br/>
  The function itself is pretty straightforward. I use this code here for that:<br/><br/></p>
  
  <pre><code>    $('.toggleMobile').click(function() {
          var hideableContent = $(this).parent().find('.hideable');
          hideableContent.slideToggle('medium');
      });
  </code></pre>
  
  <p>So... nothing fancy, i know.</p>
  
  <p>It gets more complicated as i try to detect the browser viewport. <br/>
  I think I took care of that by using the following lines (you probably will find ways to improve it):</p>
  
  <pre><code>    function whatMedia() {
  
          var viewport = $(window).width();
          var mediaType;
  
          if ( viewport &lt; 767 )
              mediaType = 'mobile';
          else if ( (viewport &gt;= 767) &amp;&amp; (viewport &lt; 991) )
              mediaType = 'tablet';
          else
              mediaType = 'desktop';
  
          return mediaType;
     }
  </code></pre>
  
  <p>Now i just need a function that gets triggered <strong>only when the viewport is <code>mobile</code></strong> (maybe the problem is here?):</p>
  
  <pre><code>   function toggleMobile(mediaType) {
  
          if ( mediaType === 'mobile' ) {
              $('.toggleMobile').click(function() {
                  var hideableContent = $(this).parent().find('.hideable');
                  hideableContent.slideToggle('medium');
              });
          }
      }
  </code></pre>
  
  <p>I have no problem checking for the viewport the first time the page is loaded.
  I just use this (very simple bit of code):</p>
  
  <pre><code>    // Check media type and activate accordingly
      var mT = whatMedia();
      toggleMobile(mT);
  </code></pre>
  
  <p>So far so good. Now comes the fun part:<br/>
  <strong>I want to be able to detect if a user resizes the browser window and activate/deactive the <code>toggleMobile()</code> function accordingly.</strong>.</p>
  
  <p>I could do this:</p>
  
  <pre><code>    $(window).resize(function() {
          var mT = whatMedia();
          toggleMobile(mT);
      }
  </code></pre>
  
  <p>As you perhaps already know, this <code>$(window).resize</code> thing makes Webkit and other browsers go a bit crazy, and repeat the function as long as the user resizes the window.<br/>
  This is good or bad depending on your take on it.<br/>
  I personally don't want this to happen, so i use <a href="https://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed">this function i found on the forums</a>:</p>
  
  <pre><code>    var waitForFinalEvent = (function () {
  
          var timers = {};
  
          return function (callback, ms, uniqueId) {
              if (!uniqueId) {
                  uniqueId = "Don't call this twice without a uniqueId";
          }
              if (timers[uniqueId]) {
                  clearTimeout (timers[uniqueId]);
              }
              timers[uniqueId] = setTimeout(callback, ms);
          }
  
     })();
  </code></pre>
  
  <p>My resize event looks like this:</p>
  
  <pre><code>    $(window).resize(function() {
          waitForFinalEvent(function() {
              var mT = whatMedia();
              toggleMobile(mT);
          }, 500, '1');         
      }
  </code></pre>
  
  <p>This certainly does delay the calculation of the browser window on resize but i can't make the function inside it work.<br/>
  I don't know what the problem is :( <br/>
  Th function gets triggered two or more times, and even when the viewport is recognized as <code>desktop</code>or <code>tablet</code>.</p>