title: Get jQuery to do action only once when using window.scroll
body: <p>I have code below which reads window height and will do one action when less than 50% scrolled and another when scrolled more than 50% - this works fine - BUT, it repeatedly does the action after the scroll fires so ends up repeating the action thousands of times when scrolling - How can I modify this to just call once, then not again until the scroll height changes to the other threshold?</p>
  <p>Code example here shows the problem - view the console.log to see the reoccurring actions</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>( function($) {
                  
          function homeMCformSwitching() {
              
              var t=$(window).scrollTop()+1; 
              var c=$('html').outerHeight(); 
              var p=(t/c*100).toFixed(0); 
              
                  
              if (p&lt;50) { 
              console.log("do action for top half");
              }
              if (p&gt;50) {
              console.log("do action for bottom half");
              }
               
          }
          
          homeMCformSwitching();
          $(window).scroll(function() { homeMCformSwitching(); });
      
      })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div { height: 3000px; background: red; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
  Check console to see the log firing many times over and over on scroll
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>