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

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

然后创建一个初始化函数:

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

就绪后调用一次初始化函数:

init();

解释:

您需要将“逻辑”与“线路”分开。这意味着您将执行操作的代码与调用操作的代码分开。完成此操作后。您可以为相同的逻辑编写额外的连接(调用)，这使您的代码保持干爽。

注意:

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

如果您处理异步代码，您希望在完成后重新安排。一个快速而肮脏的例子:

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

updateContent()