I have always a misunderstanding with javascript and how the call to a function work.

I have a range input, and send the value via api, the problem I'm having is that:

Sliding the range I send a lot of request, so I would like to wait the end of user input or sliding in my case and then send te request.

What happend if I call a lot of time a function in js?? Any time the function restart or a new instance of that function will be started??

Cause at the actual state of art if I put the range in the end it will generate from 5 to 10 request with the same value.

This is the html code:

<input type="range" min="0" max="1023" value="0" class="py-2" id="swtchvalue0" oninput="setSWstate(0)">

This is the function:

    function setSWstate(sw){
    const value = document.getElementById(valuePrefix + sw).value;
    let http = new XMLHttpRequest();
    let params = 'sw=' + sw +'&value=' + value;
    const errdiv = document.getElementById(errorPrefix + sw);
    // setting value, if not ok will overwrited after from getswitchstate and hide error div
    document.getElementById(valuePrefix + sw).value = value;
    errdiv.classList.add("hidden");

    http.open('POST', "/setsw?"+ params, true);
    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/json');

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            if(http.responseText === "ok"){
            } else {
                document.getElementById(errorPrefix + sw).innerHTML = http.responseText;
                errdiv.classList.remove("hidden");
            }
        }
    }
    http.send(params);
}

How can I wait something like 300ms to filter the end of the sliding??