jQuery break out of $.on that is within $.each

Question

I need to iterate over an AJAX response and break out of an event handler when a condition is met. I'm having trouble with this code:

$.each(response, function(i, v) {

    // create mapbox object
    var map = L.mapbox.map('map', v.map_embed_id, {
        zoomAnimation: false
    });

    var polygonLayer = L.mapbox.featureLayer().loadURL('https://a.tiles.mapbox.com/v4/' + v.map_embed_id + '/features.json?access_token=abcde').addTo(map);

    polygonLayer.on('ready', function() {
        var layer = leafletPip.pointInLayer(latlng, polygonLayer, true);

        if (layer.length) {
            // this is where I need to break out of $.on 
            // and the current $.each iteration
        }
    });
});

I know return false would break out of the $.each iteration but this is more difficult since I need to break out of the $.on event handler. What can I do? Could I use a trigger maybe?

Answer 1

Thanks to @Kevin B's advice to use recursion, this is how I fixed my code to make it work.

getMapsList().done(function(maps) {
    getMapboxMap(maps, geocode);
});

function getMapboxMap(maps, geocode) {

    var map_params   = maps[0];
    var map_embed_id = map_params.map_embed_id;

    if (maps.length > 0)
        maps.shift();

    // create mapbox object
    var map = L.mapbox.map('map', map_embed_id, {
        zoomAnimation: false
    });

    // create marker of address entered
    L.mapbox.featureLayer({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [
                geocode.location.lng,
                geocode.location.lat
            ]
        },
        properties: {
            title: address,
            'marker-size': 'medium',
            'marker-color': '#f44',
            'marker-symbol': 'star'
        }
    }).addTo(map);

    // create polygon layer and add to map from map's geojson
    var polygonLayer = L.mapbox.featureLayer().loadURL('https://a.tiles.mapbox.com/v4/' + map_embed_id + '/features.json?access_token=pk.eyJ1IjoiZW5nbGVzaWRldGVycml0b3JpZXMiLCJhIjoiekFIU0NlayJ9.rE9XdicgXc9aIiXJ9yn68w').addTo(map);

    // after polygon layer has been added to map
    polygonLayer.on('ready', function() {

        // featureLayer.getBounds() returns the corners of the furthest-out markers,
        // and map.fitBounds() makes sure that the map contains these.
        map.fitBounds(polygonLayer.getBounds());

        // create a latLng object based on lat/lng of address entered
        var latlng = L.latLng(geocode.location.lat, geocode.location.lng);

        // create point in layer object
        var layer = leafletPip.pointInLayer(latlng, polygonLayer, true);

        if (layer.length) {
            // found it
            return false;
        } else {
            if (maps.length > 0) {
                getMapboxMap(maps, geocode);
            }
        }
    });
}

function getMapsList() {
    return $.get('/utility/territories/maps-list');
}