jQuery无限的函数执行

Question

我们想知道是否可以使用jQuery来检查多个元素，并且根据一次点击分配给它们的类型，执行其他功能。基本上，一个功能将永远运行，而用户不刷新页面。

这个想法不是依赖于事件点击来执行某个功能，而是依赖于分配给特定元素的类。

例如：

$("td.gantt").each(function() {
    if($(this).hasClass("oper")) {
       //execute a serie of functions
    }
    if($(this).hasClass("preop")) {
      //execute a serie of functions
    }
});

以上执行一次，我们需要一直运行。

Answer 1

// define a function...
function ganttEach() {
  $("td.gantt").each(function() {
    // ...
  });
}

// ...repeat it once every second
window.setInterval(ganttEach, 1000);

你不能“让它一直运行”（比如，在while(true)循环中）因为JavaScript是单线程的并且阻塞线程意味着你的其他代码永远不会跑。 setInterval()确保其他代码执行时存在必要的“空白”。

setInterval()会返回一个ID，您可以将其存储在变量中并在某个时刻输入clearInterval()以使其再次停止。

---

如果你想确保你的函数的每个新迭代只在之后的开始，那么前一个已经完成了，请改用setTimeout()：

// define a self-repeating function...
function ganttEach() {
  $("td.gantt").each(function() {
    // ...
  });
  window.setTimeout(ganttEach, 1000); // calls itself again in one second
}

// ...initiate self-repeating function
ganttEach();

你可能应该包括一些方法来阻止无休止的重复，例如在setTimeout()调用之前引入一个已经检查过的标记。

Answer 2

有可能setInterval。我的建议是选择重复函数之外的元素，以便最小化开销。

无限循环会锁定浏览器用户界面，因为它是单线程环境。设置间隔，但是您可以向 UI堆栈添加操作，该操作将在给定的时间段后执行。您可以在setInterval的第二个参数中指定此期间。

// select the element outside
// to minimize overhead
$gantt = $("td.gantt");

// define a repeating action
setInterval(function() {
    $gantt.each(function() {
        if($(this).hasClass("oper")) {
           //execute a serie of functions
        }
        if($(this).hasClass("preop")) {
          //execute a serie of functions
        }
    });
}, 100); // repeat interval: 100ms

Answer 3

您可以使用setInterval

每隔几毫秒（例如50毫秒）运行检查

window.setInterval (function () { 
  // do checks here
}, 50);

如果检查过于频繁或过于复杂，最终可能会占用大量CPU资源。

Answer 4

我不确定你要做什么，但你尝试过setInterval吗？如果那是你真正想要的，它会继续运行。

Answer 5

window.setInterval(function () {
    // add your jQuery here
}, 100);