How to dynamically change the contents of an iframe having different display time

Question

I have an iframe having the id demo and I have a list of 5 html files (promo1,promo2,promo3,promo4,promo5) which is to be displayed in the 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 causes multiple invocation of demo function at a time

;(function($){

    "use strict";

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

    var $firstFrame = $("#demo");

    $(function (){

      function demo(frameId,index){

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

          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]);
          }
        });
     }

     demo($firstFrame , 1);
     });

}(window.jQuery));

Answer 1

you need to wrap your setTimeout action in a function. When you use setTimeout, you want to pass a function to be called later. Otherwise, you are calling demo immediately and passing the return value.

setTimeout(function() {demo(frameId , 1),dict["promo"+index];});