How to call a local function from another function?

Question

function A {

      *// Inside function A We have below lines of code to do debouncing*

const debounce = (func, delay) => { 
    let debounceTimer 
    return function() { 
        const context = this
        const args = arguments 
            clearTimeout(debounceTimer) 
                debounceTimer 
            = setTimeout(() => func.apply(context, args), delay) 
    } 
}  
button.addEventListener('click', debounce(function() { 


      *// Some Code Will be Ecexuted here after 3000 ms*


                        }, 3000)); 

      *// function A ends here*
}

Now I want to call "clearTimeout(debounceTimer)" or any other possible code to clear time out of that debouncing in a another function (function B)

function B {

        *// How To Call "clearTimeout(debounceTimer)"???*

}

`*//an Unknown Syntax to do "clearTimeout(debounceTimer)"*` should be what you're looking for? — Moritz Roessler, Nov 07 '18 at 11:00
yes... I want to know how to call clearTimeout(debounceTimer) here... — , Nov 07 '18 at 11:41
Your code is a bit confusing, semantically function A and B need to be followed by brackets... However is not clear what you want to accomplish. let me understand what should happen if I click on the button? — Plastic, Nov 07 '18 at 11:42
RxJS is excellent at handling resources regardless of the calling/defining contexts — kmos.w, Nov 07 '18 at 11:46
Why would you use `const context = this`? the `const` values are block scoped — kmos.w, Nov 07 '18 at 11:48

score 0 · Answer 1 · answered Nov 07 '18 at 12:02

Maybe this could help:

function A(func) {
   const obs$ = Observable.fromEvent(button, 'click')
                   .pipe(delay(debounceTime), map(args => func(args)));
   return obs$;
}

// Now you are free to use observable in function B.
function B() {
   const obs$ = A(/*your function*/);
   obs$.subscribe(res => /*use result*/)
       // Doing this will clear everything.
       .unsubscribe(() => {});
}

score 0 · Answer 2 · answered Nov 07 '18 at 12:12

Let function A return an object that gives you a handle on clearing that timeout.

For instance like this:

const button = document.getElementById("btn");
const cancel = document.getElementById("can");
const log = document.getElementById("log");

function A() {
    const state = {
        clear: () => null
    }
    
    const debounce = (func, delay) =>
        (...args) => { 
            state.clear();
            state.clear = clearTimeout.bind(null, 
                    setTimeout(func.bind(null, ...args), delay));
        };
    
    button.addEventListener('click', debounce(function() { 
        log.textContent = "Message arrived at " + Date().match(/\d+:\d+:\d+/) 
                          + "\n" + log.textContent;
    }, 3000)); 

    return state;
}

function B(state) {
    state.clear();
}

const state = A();
cancel.addEventListener('click', B.bind(null, state));

<button id="btn">Send Message</button>
<button id="can">Abort Message</button>
<pre id="log"></pre>

How to call a local function from another function?

2 Answers2