Skip to Content
Menu

each()

This is a looping function nearly identical to jQuery.each() that works with an async callback, so it can be awaited and yielded.

JavaScript September 21, 2024

Usage

JavaScript
nebula.each(array, callback)

Parameters

object
(Required) (Object or Array) An object or array of values to loop through
Default: None

callback
(Required) (Function) The function to run for each of the items in the array
Default: None

Parameter Notes

Keep in mind that this function does not provide a way to provide a selector like jQuery does!

Request or provide clarification »

Examples

Call it identically to jQuery.each()

JavaScript
let foods = ['Pizza', 'Cheeseburger', 'Salad'];
nebula.each(foods, function(food){
    console.log('This food is great:', food);
});

Await so that the callback function can be yielded

JavaScript
let animals = ['Cats', 'Dogs', 'Sloths'];
await nebula.each(animals, async function(index, animal){
    await nebula.yield(); //Or call await scheduler.yield() directly
    animals[index] += ' are cute!';
});

console.log(animals); //--> "Cats are cute", "Dogs are cute", "Sloths are cute"

🚫 The problem with jQuery.each()

JavaScript
//For example with jQuery.each():
let animals = ['Cats', 'Dogs', 'Sloths'];
jQuery.each(animals, async function(index, animal){
    await nebula.yield();
    animals[index] += ' are cute!';
});

console.log(animals); //--> "Cats", "Dogs", "Sloths"

//...and then if you were to use/log the animals array later it would be properly appended. This is a race condition that the nebula.each() function is avoiding

Another alternate way to loop through elements with a jQuery selector to yield within the functionality

JavaScript
for ( const element of jQuery('h2') ){
    await nebula.yield();

    jQuery(element).html(function(i, html){
        return html.replace(/cat/g, 'dog');
    });
}

//Now do something with the prepared elements
Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/js/modules/utilities.js on line 1056.

    No Hooks

    This function does not have any filters or actions available. Request one?
    JavaScript
    nebula.each = async function(object, callback){
        if ( !object || !callback ){
            return false;
        }
    
        // Check if object is array-like
        if ( Array.isArray(object) || typeof object.length === 'number' ){
            for ( let index = 0; index < object.length; index++ ){
                let result = await callback.call(object[index], index, object[index]);
    
                if ( result === false ){ // If callback returns false, break the loop
                    break;
                }
            }
        } else {
            // For objects with key-value pairs
            for ( let key in object ){
                if ( object.hasOwnProperty(key) ){
                    let result = await callback.call(object[key], key, object[key]);
    
                    if ( result === false ){ // If callback returns false, break the loop
                        break;
                    }
                }
            }
        }
    
        return object; //Return the original object (to enable chaining)
    };
    

    Override

    To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).

    JavaScript

    For non-module import functions:

    nebula.each = function(object, callback){
        //Write your own code here, leave it blank, or return false.
    }


    For dynamically imported module function overrides:

    jQuery(window).on('load', function(){
        nebula.each = function(object, callback){
            //Write your own code here, leave it blank, or return false.
        }
    });


    Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:

    jQuery(document).on('nebula_module_loaded', function(module){
        //Note that the module variable is also available to know which module specifically was imported
        if ( typeof nebula.each === 'function' ){
            nebula.each = function(object, callback){
                //Write your own code here, leave it blank, or return false.
            }
    	}
    });