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

不断运行功能

2 个答案: