javascript - 不断运行一个函数

Question

我正在使用出色的inView插件来检查元素是否在视口中可见，使用 setInterval，但该函数仅运行一次，并且仅在元素可见时才运行，否则（应运行 else 语句）。

var checkViewport = setInterval(function() {
    $('#colorbox').on('inview', function(event, visible) {
      if (visible) {
        console.log('YES');
      } else {
        console.log('NO');
      }
    });
}, 5000);

Answer 1

绑定一次事件，并检查一个单独的变量。尝试这个：

var isVisible = false;

$('#colorbox').on('inview', function(event, visible) {
    isVisible = visible;
});

var checkViewport = setInterval(function() {
    if (isVisible) {
        console.log('YES');
    } else {
        console.log('NO');
    }
}, 5000);

您可以以不同的方式构造它，以确保isVisible它不是全局变量并且也可以被setInterval仍然访问。

Answer 2

您示例中的代码仅在元素位于视口中时绑定事件。你实际上并没有执行任何事情，只是重复绑定一个事件。

我建议改为colorbox每隔间隔检查元素，然后记录到控制台是否colorbox可见。

来源（HTML DOM 和 JavaScript）：

var checkViewport = setInterval(function() {
    myColorBox = document.getElementById("colorbox");
      if (myColorBox.style.visibility == "visible") {
        console.log('YES');
      } else {
        console.log('NO');
      }
    });
}, 5000);