Question

我刚刚使用了这个小脚本，但是有一些问题。我希望每10秒更新一次内容，但是当网站加载时，内容显示需要10秒，然后更新才能生效。

所以我怎么能让它工作，所以它立即加载内容，然后每10秒开始刷新一次。谢谢。

  hr = new Date().getHours();

  for (var i=0; i < data.length; i++) {
     if (hr >= data[i][0] && hr <= data[i][1]) {
        $("#someContent").html(data[i][2]);

        break;
      }      
    }

Answer 1

首先创建一个更新内容的函数：

function updateContent() {
    $("#someContent").html(data[i][2]); 
}

然后创建一个init函数：

function init() {
    updateContent();
    setInterval(updateContent, 10000)
}

准备好后调用init函数：

init();

说明：

你需要从“布线”中分离出“逻辑”。这意味着您从调用内容的代码中拆分执行内容的代码。你做完这个之后。你可以为同一个逻辑编写额外的接线（调用），这样可以保持你的代码干。

注意：

如果updateContent（）函数是同步的，则上述解决方案才是安全的。这意味着：如果它直接影响DOM。如果要加载AJAX，则不安全使用setInterval（），因为服务器可能需要更多时间来回答时间间隔。

如果处理异步代码，则需要在完成后重新安排。一个快速而肮脏的例子：

function updateContent() {
    someFunctionReturningAPromise()
        .then(() => setTimeout(updateContent), 10000)
        .catch(e => console.log(e));
}

updateContent()

Answer 2

您想要的是内容加载时间隔内的代码。一个简单的解决方案是将其提取到一个函数中，然后在内容加载时调用该函数，并在setInterval回调中调用该函数。

// when content is loaded...
   doSomething(); 

// and again each 10 seconds...
   window.setInterval(function() {
        doSomething(); 
   }, 10000);

   function doSomething() {
      $("#someContent").html(data[i][2]);
   }

Answer 3

这里有一些很好的解释答案。我只想给你另一种可能性。您甚至可以使用自动执行的命名函数来减少开销。非常简单，很好维护。

使用setTimeout代替setInterval的好处是，它将等待代码的执行，然后开始10秒超时。

(function runner() {
  $("#someContent").html(data[i][2]);
  setTimeout(runner, 10000);
})();

jquery立即加载内容，然后每10秒更新一次

3 个答案: