How to set Cross Synchronous in Node.js? (related Circular Dependency)

Question

I have 2 different js files that depend each other like this:

// slider.js
'use strict';
import Loop from './loop.js';
export default class Slider {
    constructor(elem) {
        this.elem = elem;
        this.Loop = new Loop(this.elem);
        this.Loop.routine();
    }
    updateImage() {
        console.log(
            'Cross Synchronous Test: Updated images',
            'Called the function from loop.js'
        );
    }
}
let proSlider = new Slider('Number')

---

// loop.js
import Slider from './slider.js';
export default class Loop {
    constructor(elem) {
        this.elem = elem;
        this.Slider = new Slider(this.elem);
        this.Slider.updateImage();
    }
    routine() {
        console.log(
            'Cross Synchronous Test: references a group of actions',
            'Called the function from Slider.js'
        );
    }
}

My goal is to call the function updateImage() inside of loop.js and call the another function routine() inside of slider.js at the instance level, same time. So they can be separated as 2 different files, but still can access each other whenever I want it.

The problem is this throws an error called maximum callback stack.

Uncaught RangeError: Maximum call stack size exceeded

I've read some of articles about Circular Dependency #1 , #2 but the article #2 is mentioning based on typescript. I've changed the code w/o the typescript keywords and then the browser fires the same error.

// slider.js
constructor(elem) {
    this.elem = elem;
    this.getLoop();
}
getLoop() {
    return new Loop(this.elem).routine();
}

---

// loop.js
constructor(elem) {
    this.elem = elem;
    this.getSlider();
}
getSlider() {
    return new Slider(this.elem).updateImage();
}

Are there any ways to set cross-call functions in Node.js?

Answer 1

Your problem is not a circular dependency of modules but an non terminating indirect recursion.

All unnecessary parts removed your code boils down to:

class Slider {
    constructor() {
       this.Loop = new Loop();
    }
}

class Loop {
    constructor() {
        this.Slider = new Slider();
    }
}

As you can see, the contructors for Slider and Loop are recursively calling each other in an endless loop that never terminates and creates an unlimited number of alternating instances of Slider , Loop , Slider , Loop , Slider , Loop , ...

One resort out of this dilemma could be that the second constructed instance gets an pointer to the first one and terminate the recursion:

class Slider {
    constructor(elem, loop) {
        this.elem = elem;
        this.Loop = loop || new Loop(this.elem, this);
        this.Loop.routine();
    }
    updateImage() {
        console.log(
            'Cross Synchronous Test: Updated images',
            'Called the function from loop.js'
        );
    }
}

class Loop {
    constructor(elem, slider) {
        this.elem = elem;
        this.Slider = slider || new Slider(this.elem, this);
        this.Slider.updateImage();
    }
    routine() {
        console.log(
            'Cross Synchronous Test: references a group of actions',
            'Called the function from Slider.js'
        );
    }
}