如何清除Chrome中特定标签上的时间间隔设置？

Question

I am creating a chrome extension for auto refreshing a page after the specific interval provided by the user. Based on the current tabs id it sets the interval and when user wishes to stop the interval he just clicks the stop button.

I am able to setInterval and store that timers value in object for eg : javascript

  var timerid = setInterval(function(){},interval)
  var timers = {
      timerid : timerid,
      tabid : tabid
  }

On Clearing Interval I just find the timer value by using the tab id

  var timerid = _.findWhere(timers,{tabid : tabid });
  clearInterval(timerid) 

My Background.js

var tabId = 0;
var activeTabs = [];
var timers = [];

//listening for new tab message and refresh action
chrome.runtime.onMessage.addListener(   
function(request, sender, response){
    console.log("Inside background");
    console.log("Tab Id ",request.tabId)
     if(request.type === 'reload' && request.tabId !== null ){
        console.log("Tab Reload Event")
        console.log("Refreshing tab ",request.tabId );

        var first = setInterval(function(){
                                chrome.tabs.reload(request.tabId);
                             },request.interval);
        timers.push({ tabid: request.tabId,timerId : first });
        console.log("Timers");
        console.log(timers);
        console.log("Done reloading")
    }
    if(request.type === 'clear' && request.tabId !== null){

        console.log("running intervals");
        console.log(timers);
        var timer = _.findWhere(timers,{ tabid: request.tabId });
        console.log("Clearing the running interval of             ",timer.timerId);
        console.log("Tab Id ",request.tabId);
        clearInterval(timer.timerId);
    }       
}
)

chrome.tabs.onCreated.addListener(function(tab){
      activeTabs.push(tab.id);
});

But this won't clear the interval i set previously ?

Answer 1

You appear to be re-declaring your timers object every time you start an interval.

You can also avoid having to use findWhere if you used the tabid as the property name.

var timerid = setInterval(function(){},interval)
var timers[tabid] = timerid;

Then to clear you can use:

var timerid = timers[tabid];
clearInterval(timerid);

The other problem you may be running into is if you are declaring your timer in a tab then that won't be shared with your other tabs. For that you will need to look at message passing , and using a background page to co-ordinate things.

Answer 2

Go for setTimeout method. just do some workaround in that like below.

isStopped = false;
interval = //userinput;
var operation = function(){
  if(isStopped == true){
    return;
  }
  ......your code....
  setTimeout(operation, interval);
}

Change the global varible isStopped to true when the user wants to stop. Do recursive call after your code.

Let me know whether it works ?