Run a function constantly

Question

I'm using the excellent inView plugin to check if an element is visible in the viewport, using setInterval, but the function only runs once and only when the element IS visible, not otherwise (should run else statement).

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

@Nimbuz the plugin you're using already runs its own interval timer. You just need to bind the event handler. — Pointy, May 08 '13 at 18:57

score 4 · Accepted Answer · answered May 08 '13 at 18:54

Bind the event once, and check a separate variable. Try this:

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

You can structure this differently to make sure isVisible isn't a global variable and can be accessed by the setInterval still as well.

score 1 · Answer 2 · answered May 08 '13 at 18:54

The code in your example only binds an event when the element's in the viewport. You're not actually executing anything, just repeatedly binding an event.

I would suggest instead checking the element colorbox every interval, then logging to the console whether the colorbox is visible.

Source (HTML DOM and JavaScript):

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

Run a function constantly

2 Answers2