JavaScript Helper Functions

PublishedSeptember 25, 2014 UpdatedJanuary 1, 2025

Various helper functions are included on this page. See DOM Helpers to look for document object helpers.

debounce resources

document height

Since browsers handle this calculation differently.

var _height = function() {
    var body = document.body,
        html = document.documentElement;

    // get using highest value
    var height = Math.max(
        body.scrollHeight,
        html.scrollHeight,
        body.offsetHeight,
        html.offsetHeight,
        body.clientHeight,
        html.clientHeight
    );

    return height;
}

filename from path

// get the filename from a path without using regex
var _filename = function(path) {
    return path.split('/').pop();
}

find index by key value

// find index of an object in an array by key and value
var _findIndexOf = function(array, key, value) {
    var i;
    for(i = 0; i < array.length; i++) {
        if(array[i].hasOwnProperty(key) && array[i][key] === value) {
            return i;
        }
    }
    return -1;
}

iframe

//breakout of iframe / frame
function iframed() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}
if(iframed()) window.top.location.reload(false);

path only, remove filename

// get the path only without using regex
var _path = function(path) {
    return path.substring(0, path.lastIndexOf('/') +1);
}

source

math

/**
 * round to decimal place
 *
 * @param num number to round
 * @param dec number of decimal places to round to
 */
function _round(num, dec) {
    return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
}

orientation change listener

Register an event handler by calling addListener() on the MediaQueryList object named query. The callback function will receive this object as an argument when triggered.

var query = window.matchMedia("(orientation:landscape)");
var toggle = function(query) {
    if (query.matches) {
        console.log('------- LANDSCAPE -------')
    } else {
        console.log('------- PORTRAIT -------')
    }
}
query.addListener(toggle);

// remove as needed
query.removeListener(toggle);

MediaQueryList.addListener() is deprecated. You can add a check as follows if you need to support older browsers, e.g., Safari 13.

if (query?.addEventListener) {
    query.addEventListener(toggle);
} else {
    query.addListener(toggle);
}

resize handler

window.addEventListener("resize", resizeThrottler, false);

var resizeTimeout;
function resizeThrottler() {
    // wait for resizeHandler execution to complete
    if ( !resizeTimeout ) {
        resizeTimeout = setTimeout(function next() {
            resizeTimeout = null;
            resizeHandler();

            // resizeHandler executes at 15fps
        }, 66);
    }
}

function resizeHandler() {
    // handle the resize event
    console.log(window.innerWidth);
}

jQuery and/or lodash resize handler

Handler example.

async function handleEvent(event) {
    switch (event.type) {
        case 'resize':
            // do something
            break;
        case 'scroll':
            // do something
            break;
        default:
            break;
    }
}

validation

// validate external URL syntax
var _isExternalURL = function(str) {
    var a  = document.createElement('a');
    a.href = str;

    if (!a.host || location.host == a.host)
    {
        return false;
    }
    return true;
}

JavaScript