title: A question regarding jQuery hover(), setInterval scope, and The "this" Problem ---
body: <p><strong>UPDATE ---</strong>
  from CertainPerformance:</p>
  <pre><code>$(&quot;.gallery-image&quot;).each(function() {
    let callInterval;
    $(this).hover(function(){
      clearInterval(callInterval);
    }, function(){
      callInterval = setInterval(intervalFunction.bind(this), 500);   
    });
  });
  </code></pre>
  <p><strong>This helped with the scope question; but now I have a follow up -</strong></p>
  <p><strong>Each image at <code>position</code> <code>i</code> needs to be iterating over a separate index, <code>index</code> which determines the current src of the image at position <code>i</code>. The starting <code>index</code> for each image's <code>setInterval</code> loop should be its <code>position</code> and then <code>index++</code> each loop. But I'm stuck where each image's src <code>index</code> is only incrementing by one, and then reiterating that same value for each <code>setInterval</code> loop. Where the heck am I supposed to be declaring the <code>index</code> so that it's local to each image's <code>setInterval</code> loop but is incremented without being reset at its starting value....?</strong></p>
  <p><strong>This is so elementary, but I can't just get it all together.</strong></p>
  <p><strong>-----------------</strong></p>
  <p>Before I start -- I've spent a few hours going through SO questions that address certain parts of this, but I'm getting really stuck putting it all together, so forgive me if this a duplicate of several things, ha.</p>
  <p>I'm making an image gallery page, where the placeholder for each image rapidly cycles through all possible gallery images until user hovers over that image/placeholder, upon which the &quot;proper&quot; image is (statically) displayed. Then when the user hovers out, that image resumes its rapid cycling. Each image placeholder is cycling through sources simultaneously &amp; independently of each other.</p>
  <p>I'm having trouble with needing both hover-in and hover-out parts of the jQuery hover() function to reference the same setInterval ID, but at the same time, the setInterval should have a local scope, specific to each image element being hovered over. I'm also somewhat new to jQuery, and the distinctions between it and js at large aren't always super clear to me.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;gallery&quot;&gt;
      &lt;img class=&quot;gallery-image&quot; src=&quot;image0.jpg&quot;&gt;
      &lt;img class=&quot;gallery-image&quot; src=&quot;image1.jpg&quot;&gt;
      &lt;img class=&quot;gallery-image&quot; src=&quot;image2.jpg&quot;&gt;
      &lt;img class=&quot;gallery-image&quot; src=&quot;image3.jpg&quot;&gt;
      &lt;img class=&quot;gallery-image&quot; src=&quot;image4.jpg&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>js:</p>
  <pre><code>var images = document.getElementsByClassName('gallery-image');
  var callInterval;
      
  $(&quot;.gallery-image&quot;).hover(function(){
          clearInterval(callInterval);
      }, function(){
          callInterval = setInterval(intervalFunction.bind(this), 500);   
      })
  
  function intervalFunction(){
      var position = $(this).index();     
      var index = position;
      if (index &lt; 14) {
          $(this).attr(&quot;src&quot;, &quot;image&quot; + index + &quot;.jpg&quot;);
          index++;                    
      } else {
          $(this).attr(&quot;src&quot;, &quot;image&quot; + index + &quot;.jpg&quot;);
          index = 0;
      }
  }
  </code></pre>
  <p>I've tried both vanilla javascript and jQuery, as well as various combinations of the two. Am I mixing them in the wrong way? Do I need multiple hover() functions, and define the setInterval functions that way? Should I just manually write out a hover() for each image in the gallery and tie the setInterval functions to each image that way?</p>
  <p>Would it be more helpful to post a snippet?</p>
  <p>I feel like I've just been staring at this problem for so long that I'm just getting in my own way now, the answer's got to be right in front of me... I'm losing my mind ha.</p>