JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div style='width:3399px;height:300px'>
fff
</div>
  <a herf='111.aaa' target='pane' id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <span id="div-03">Here is div-03</span>
    </div>
  </a>
<table ><tr id="t">
<td id="d">aaa</td>
<input name="h" readonly=false type='text'>
<td>bbb</td></tr></table>

JavaScript

var timeoutManager = new (class TimeoutManager {
    constructor() {
        this.timeouts = {};
    }

    setTimeoutOnce(key, callback, delay, ...args) {
        this.clearTimeoutByKey(key);
        this.timeouts[key] = setTimeout(() => {
            callback(...args);
            delete this.timeouts[key];
        }, delay);
    }

    clearTimeoutByKey(key) {
        if (this.timeouts[key]) {
            clearTimeout(this.timeouts[key]);
            delete this.timeouts[key];
        }
    }

    clearAll() {
        for (const key in this.timeouts) {
            clearTimeout(this.timeouts[key]);
        }
        this.timeouts = {};
    }
})();


function setTimeoutOnce(key, callback, delay, ...args) {
    timeoutManager.setTimeoutOnce(key, callback, delay, ...args);
}

function clearAllTimeouts() {
    timeoutManager.clearAll();
}

// Usage
setTimeoutOnce("key1", (param1, param2) => {
    console.log(param1, param2); // Outputs: "Hello" "World"
}, 1000, "Hello", "World");
setTimeoutOnce("key1", (param1, param2) => {
    console.log(param1, param2); // Outputs: "Hello" "World"
}, 1000, "Hello1", "World");
setTimeoutOnce("key1", (param1, param2) => {
    console.log(param1, param2); // Outputs: "Hello" "World"
}, 1000, "Hello2", "World");