How to avoid an infinite loop in JavaScript

Question

I have a Selenium webdriverIO V5 framework. The issue I am facing here is, the below code works fine on Mac OS, but it does not work correctly on the Windows OS. In the Windows OS it gets stuck with an infinite loop issue.

The below code functionality is: Merge yaml files (which contains locators) and return the value of the locator by passing the key:

const glob = require('glob');
const yamlMerge = require('yaml-merge');
const sleep = require('system-sleep');

let xpath;

class Page {
    getElements(elementId) {
        function objectCollector() {
            glob('tests/wdio/locators/*.yml', function (er, files) {
                if (er) throw er;
                xpath = yamlMerge.mergeFiles(files);
            });
            do {
                sleep(10);
            } while (xpath === undefined);
            return xpath;
        }

        objectCollector();
        return xpath[elementId];
    }
}

module.exports = new Page();

Answer 1

Since you are waiting on the results of a callback, I would recommend returning a new Promise from your getElements function and resolve() the value you receive inside the callback. Then when you call getElements, you will need to resolve that Promise or use the await notation. The function will stop at that point and wait until the Promise resolves, but the event loop will still continue. See some documentation for more information.

I'll write an example below of what your code might look like using a Promise, but when you call getElements, you will need to put the keyword await before it. If you want to avoid that, you could resolve the Promise from objectCollector while you're in getElements and remove the async keyword from its definition, but you really should not get in the way of asynchronous JavaScript. Also, you can probably shorten the code a bit because objectCollector looks like an unnecessary function in this example:

const glob = require('glob')
const yamlMerge = require('yaml-merge')
const sleep = require('system-sleep')

let xpath

class Page {
    function async getElements(elementId) {
        function objectCollector() {
            return new Promise((resolve,reject) => {
                glob('tests/wdio/locators/*.yml', function (er, files) {
                    if (er) reject(er)
                    resolve(yamlMerge.mergeFiles(files))
                })
            })
        }

        let xpath = await objectCollector()
        return xpath[elementId]
    }
}

module.exports = new Page();