title: Javascript: Stop running interval in background
body: <p>I am creating an extension for Firefox. This includes using <code>self.port</code>. Here's my code in <code>panel.js</code>:</p>
  
  <pre><code>self.port.on("showDlg", function(val) {
      document.getElementById('queen').onclick = function(){
          self.port.emit("song", 'queen');
      };
      document.getElementById('beatles').onclick = function(){
          self.port.emit("song", 'beatles');
      };
  });
  </code></pre>
  
  <p>Here's the <code>content.js</code>:</p>
  
  <pre><code>self.port.on("song", function(val) {
      if (val.code = 'queen'){
          interval = setInterval(function () {
              console.log('show must go on');
          }, 1000);
      } else if (val.code == 'beatles'){
          interval = setInterval(function () {
              console.log('yesterday');
          }, 1000);
      }
  }
  </code></pre>
  
  <p>It is all working, when I click <code>queen</code>, it prints me <code>show must go on</code> every 1 second. But when I click <code>beatles</code>, it still prints <code>show must go on</code> along with <code>yesterday</code>.</p>
  
  <p>How can I stop previous interval? As far as I understand, it runs in the background, and every action is a new instance. If so, how can I stop previous instance?</p>
  
  <p>Thanks.</p>