Question

我有2个iframe有{ids demo和demo1。我有一个5个html文件列表（promo1，promo2，promo3，promo4，promo5），这些文件必须在两个iframe中一个接一个地重复显示。每个html页面都有不同的时间间隔，它应该在框架中显示

以下是我的JavaScript代码，其中dict代表每个html及其显示时间。

以下代码会导致浏览器崩溃并填满内存。我知道它是因为复发。请帮帮我

;(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));

Answer 1

根据@fuyushimoya的评论，您需要使用setTimeOut代替setInterval。

的setTimeout：

在指定的延迟后调用函数或执行代码段。

的setInterval：

使用固定的方法重复调用函数或执行代码片段每次调用该函数之间的时间延迟。返回intervalID。

换句话说，setTimeOut在超时到期后调用一次函数，setInterval以一段的间隔调用一个无限次的函数。

你应该好好改变这个功能。

Answer 2

<强>之前

$demo.attr("src","static/display" + index + ".html");
$demo1.attr("src","static/display" + index + ".html");

<强>后

$demo.attr("src","static/display" + index + ".html?" + Math.random());
$demo1.attr("src","static/display" + index + ".html?" + Math.random());

Answer 3

使用setTimeout而不是setInterval。 setInterval导致在重复的时间间隔内调用demo（）函数，setTimeout只调用一次demo（）函数，这是必需的行为。

如何动态地在iframe中显示不同时间间隔的不同页面

3 个答案: