運行功能不斷

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