Question

我想要做的实际上是一个网页，在一个部分刷新并每隔10秒左右加载一个不同的内容文件。我不想使用<iframe>。我把它关闭，因为它工作，但文件是随机显示而不是按顺序显示。我确信有更合适的方法可以做到这一点，但Jquery和Javascript不是我的强项。如果它有帮助，我正在使用Coldfusion。

这就是我所拥有的：

$(document).ready(function() {
    $("##responsecontainer").load("content/1.cfm");
    var refreshId = setInterval(function() {
        $("##responsecontainer").load(‘content / 1. cfm’);
    }, 20000);
    $.ajaxSetup({
        cache: false
    });
});

$(document).ready(function() {
    $("##responsecontainer").load("content/2.cfm");
    var refreshId = setInterval(function() {
        $("##responsecontainer").load(‘content / 2. cfm’);
    }, 30000);
    $.ajaxSetup({
        cache: false
    });

});

$(document).ready(function() {
    $("##responsecontainer").load("content/3.cfm");
    var refreshId = setInterval(function() {
        $("##responsecontainer").load(‘content / 3. cfm’);
    }, 60000);
    $.ajaxSetup({
        cache: false
    });

});

这是带有ID的简单DIV，显示其他文件中的内容：

<div id="responsecontainer" ></div>

我感谢任何帮助！

更新：需要其他帮助。

所以我无法获得任何显示的解决方案。但是，我发现了这个并且效果很好。

$(function () {

var counter = 0,
    divs = $('#div1, #div2, #div3');

function showDiv () {
    divs.hide() // hide all divs
        .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
        .show('fast'); // and show it

    counter++;
}; // function to loop through divs and show correct div

showDiv(); // show first div    

setInterval(function () {
    showDiv(); // show next div
}, 10 * 1000); // do this every 10 seconds    

});

但是，我现在需要这些div中的内容自动刷新（不刷新整个页面），因为它将从数据库中提取的数据将被更新。如果有帮助，我确实拥有它内部的所有三个div。

为了澄清，这是一个将在墙上监视器上显示内容不断变化的网页。

Answer 1

问题是你正在触发3个不同的间隔尝试只用一个像：

$(document).ready(function() {
  var idx = 1;
  var time = 20000;
  var file = ["1.cfm","2.cfm","3.cfm"];
  $(“#responsecontainer”).load("content/1.cfm");
  var refreshId = setInterval(function() {
                     $(“#responsecontainer”).load("content/" + file[idx]);
                     idx = (idx<file.length?idx++:0);
                  }, time);
  $.ajaxSetup({ cache: false });
});

同样有多个$(document).ready(function() {有点不对......这也解决了这个问题。

Answer 2

您应该在文件成功加载后开始下一个间隔。

  $(function(){
    var time = 3000,
    files = ["1.cfm","2.cfm","3.cfm"],
    ind=0,
    element=$('#responsecontainer');
    function refreshCont(){
        var int = setTimeout(function(){
            element.load('content/' + files[ind] , function(){
            ind = ind < files.length ? ind++ : 0;
            refreshCont();
            });
        }, time);
    }
    $.ajaxSetup({ cache: false });
});

Jquery / Javascript按时间间隔

2 个答案: