title: Click event on a button with SetInterval Method
body: <p>I'm not able to figure out how this can be accomplished. I'm working on the chrome extension and I have a setInterval method which monitors a button on a page and when its clicked, it runs a function. but the problem is, when I click the button, the function runs multiple times and I clearly understand this is because of the Interval function, but I want the  setInterval to run always on this page so that I can monitor if the button is clicked or not. Below is my code</p>
  <pre><code>$(function(){
  var url=window.location.href;
  findAction(url);
  }
  
   function findAction(url){
  
          setInterval(()=&gt;{
          Acceptbtn = $(&quot;[slot=primary-content-area&quot;)[4].querySelector(&quot;sn-inbox&quot;);
          
                  if(Acceptbtn !== undefined &amp;&amp; Acceptbtn !== null){
                  Acceptbtn.addEventListener('click', myFunction);                
                  }
  
              function myFunction() {
              console.log(&quot;clicked&quot;);
              runAction(url)          
                  };
      
      },1000);
  
  } 
  </code></pre>
  <p>Is there any way to tackle this situation or have I made something simple, complicated or Is my approach completely wrong.?</p>
  <p>Below is the Div which my extension monitors for the Accept button -
  <a href="https://i.stack.imgur.com/Zj48v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zj48v.png" alt="enter image description here" /></a></p>
  <p>And once the Accept button is clicked, this is what happens
  <a href="https://i.stack.imgur.com/TFrrQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TFrrQ.png" alt="enter image description here" /></a></p>
  <p>The Interval method keeps checking for this button and once found and I click on it, I want the runAction(url) function to execute. With my current code, the function gets executed but multiple times</p>