How to display different pages in iframes for different time intervals dynamically

I have 2 Iframes having the ids demo and demo1. I have a list of 5 html files (promo1,promo2,promo3,promo4,promo5) which have to be displayed in both Iframes, one after the other, repeatedly. Each html page has a different time intervals for which it should be displayed in the frame

Here is my JavaScript code in which the dict represents each html and the time for which it should be displayed.

the following code makes the browser crash and fill up the memory. i know its because of the reccurrsion. please help me

;(function($){

"use strict";

var index=1,
  dict={"promo1":70000,"promo2":46500,"promo3":18000,"promo4":93000,"promo5":86000},

var $firstFrame = $("#demo"),
  $secondFrame = $("#demo1");

$(function (){

  function demo(frameId,index){

    frameId.attr("src","static/promo" + index + ".html");
    frameId.load(function(){
      if(a){

        a.clearTimeout();
      }
      if(index < 5){

        a = setTimeout(demo(frameId , index + 1),dict["promo"+index]);
      }
      else if(index = 5){
        var a = setTimeout(demo(frameId , 1),dict["promo"+index]);
      }

    });
    index += 1;

      if(index > 5){

        index = 1;
      }

 }
 demo($firstFrame , 1);
 });
}(window.jQuery));