运行功能不断

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