Exit from Jquery $.each loop which has function call and if statements inside it

Question

I want to exit out of the jquery $.each loop when when the exit variable in my function is 1.

Below is the API response :

{
    "data": [{
        "name": "rotate",
        "game": [{
                    "id": "1"
                },
                {
                    "id": "2"
                }]
        },
        {
        "name": "skew",
        "game": [{
                    "id": "32"
                }]
        }
    ]
}

New entries added:

{
    "data": [{
        "name": "rotate",
        "game": [{
                    "id": "1"
                },
                {
                    "id": "2"
                }]
        },
        {
        "name": "skew",
        "game": [{
                    "id": "32"
                }]
        },
        {
        "name": "move",
        "game": [{
                    "id": "12"
                },
                {
                    "id": "14"
                }]
        },
        {
        "name": "update",
        "game": [{
                    "id": "8"
                }]
        }
    ]
}

And the code I am using is :

function getdata(response) {
    var exit = 0;
    $.each(response.data, function( key, value ) {
        if(value.game.length > 1) {
            firebase.database().ref(`data/${value.name}`).once("value", snapshot => {
                if (snapshot.exists()) {
                    exit = 0;
                } else {
                    changeVideo(data);
                    exit = 1;
                }
            }).catch((error) => {
                console.error(error);
            });
        }
        else {
            firebase.database().ref(`data/${value.name}`).once("value", snapshot => {
                if (snapshot.exists()) {
                    exit = 0;
                } else {
                    changeVideo(data);
                    exit = 1;
                }
            }).catch((error) => {
                console.error(error);
            });
        }
    });
}

Which calls a change video function :

function changeVideo(data) {
    console.log("Change video called");
    var video = document.getElementById('video');
    var name = data.name;
    video.setAttribute("src", "videos/"+name+".mp4");
    video.load();
    if (video.paused) {
        video.play();
    }
    $("#video").show().delay(7000).queue(function (next) {
        $(this).hide();
        showtable(data);
        $(".blackcontainer").show().delay(10000).queue(function (next) {
            writetofirebase(data);
            next();
        });
        next();
    });
}

Basically, the code is to display a video if and only if there is any new item in my API response. If new item is there, I want to display the video and then hide that video and show a table. then I write that value to firebase so that next time I call the api and compare with firebase data, I dont want to show the video if it is already shown. But when n new entries comes in the API response, Everything breaks. and the function changevideo is called n times. I want to exit when the first video is played.

I am also using a setInterval(function() {getdata();}, 60000); for calling the function each 60 seconds. I want only one video to play in the 60 seconds. then only in the next call, it needs to play the next video even if there are multiple new entries in the API response.

Because you have multiple internal functions, you can't use return false as it will only return from the inner function. You've already set the exit=true so you can add a check at the top of the loop: `.each(response.data, function( key, value ) { if (exit!==0) return false;` Note that this won't stop your `.delay(7000)` so you may also have to add a `.stop` for that. — freedomn-m, Mar 31 '22 at 14:41
This may answer your question: [how to break out of a jquery loop](https://stackoverflow.com/questions/1784780/how-to-break-out-of-jquery-each-loop) - but it looks like only set `exit` on an async callback, in which case your loop will have already completed before exit!==0 — freedomn-m, Mar 31 '22 at 14:44
@freedomn-m So, because firebase call is an async call the loop is running without exiting? And so, there is no way to exit? — Ramees Shahzad, Mar 31 '22 at 14:58
If it's async (looks like) then your loop will have already completed before the async callbacks fire. You'll need to rethink using a loop. Looks like the key is in your statement "*I want to exit when the first video is played.*" - just don't use a loop. `var value = response.data[0];` then remove it with `response.data.splice(0,1)` so next time ("*next call, it needs to play the next video*") it will pick up the 2nd (now the first). Check if there's any first. — freedomn-m, Mar 31 '22 at 15:19

Exit from Jquery $.each loop which has function call and if statements inside it

0 Answers0