Is there a way to return a boolean value through setInterval() function?

Question

I'm working on a video player project and I'm using videojs as well as videojs-ima for ad pre-rolls.

I've finally figured out a way to tell if there is an ad present or not; however, I'm trying to return a boolean value of true or false in order to tell when to run and execute a certain code block.

Here's my code, it currently doesn't work like it's purpose to.

if (navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/Android/i)) {

    let checkAd = document.querySelectorAll('.ima-ad-container');

    let checkAdLoop = setInterval(() => {
        for (let i=0; i < checkAd.length; i++) {
            if (checkAd[i].style.display == 'none') {
                console.log('Ad is NOT playing.');
                return false;
            } else {
                console.log('Ad is playing.');
                return true;
                // do nothing
            }
        }
    }, 1000);
    player.on('touchend', () => {
        if (player.paused() && checkAdLoop() == false) {
            player.play();
        } else if (player.currentTime > 0 && checkAdLoop() == false) {
            player.pause();
        }
    });
    $('.vjs-icon-placeholder').on('touchend', () => {
        if (player.paused() && checkAdLoop() == false) {
            player.play();
        } else if (player.currentTime > 0 && checkAdLoop() == false) {
            player.pause();
        }
    });
}

I would love it if someone could please help me understand and could explain to me why this doesn't work. How could I go about fixing this?

I know I'm close. Thanks in advance!

Answer 1

This was a classical XY problem.

Trying to solve a problem that wasn't really related to the overall picture.

Here's the code that works and how I went about it differently.

if (navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/Android/i)) {

    let checkAd = $('.ima-ad-container');

    player.on('touchend', () => {
        if (checkAd.css('display') != 'none') {
            console.log('Ad is playing.');
            // do nothing
        } else if (checkAd.css('display') == 'none') {
            console.log('Ad is NOT playing.');

            if (player.paused()) {
                player.play();
            } else {
                player.pause();
            }
        }
    });
    $('.vjs-icon-placeholder').on('touchend', () => {
        if (checkAd.css('display') != 'none') {
            console.log('Ad is playing.');
            // do nothing

        } else if (checkAd.css('display') == 'none') {
            console.log('Ad is NOT playing.');

            if (player.paused()) {
                player.play();
            } else {
                player.pause();
            }
        }
    });
}