Как замкнуть функцию что бы иметь доступ к внешним переменным?

Я отправляю запросы на сервер и получаю от него ответы, которые вывожу на экран. Ответы могут прийти в разное время. Поэтому я хочу сохранять время каждого запроса в переменную, что бы отслеживать какой ответ является наиболее актуальным. Я понимаю, что нужно замкнуть функции callBackRequest и promiseRequest и тогда они будут иметь доступ к времени запроса time. По нему я смогу определить какой ответ является актуальным. К сожалению никак не могу разобраться как их замкнуть.

var QS = QS || {}

QS.main = {
    typingDoneAfter: 5000,

    init: function () {
        let timeout = null;

        document.getElementsByClassName("call")[0].onkeyup = function () {
            clearTimeout(timeout);
            timeout = setTimeout('QS.requests.callBackRequest(QS.view.displayResult)', 800);
        }

        document.getElementsByClassName("promise")[0].onkeyup = function () {
            clearTimeout(timeout);
            timeout = setTimeout('QS.requests.promiseRequest()', 800);
        }
    },
}

QS.requests = {
    url: "http://localhost:3000/?key=",
    lastReqTime: undefined,

    callBackRequest: function (callback) {
        var xhr = new XMLHttpRequest();
        var time = new Date().getTime();
        QS.requests.lastReqTime = time;

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                callback(xhr.responseText);
            }
        }

        xhr.open("GET", this.url + document.querySelector(".call").value, true);
        xhr.send();
    },

    promiseRequest: async function () {
        var time = new Date().getTime();
        QS.requests.lastReqTime = time;

        var response = await fetch(this.url + document.querySelector(".promise").value);
        var result = await response.text();
        QS.view.displayResult(result)
    },
}

QS.view = {
    displayResult: function (matches) {
        document.querySelector(".result").textContent = matches;
    },
}

window.addEventListener("load", QS.main.init);

Ответы (1 шт):

Автор решения: Grundy

В данном случае ничего "специально" замыкать не нужно. Уже есть поле lastReqTime, достаточно сравнить его с переменной time и если они отличаются - не вызывать callback:

var time = new Date().getTime();
QS.requests.lastReqTime = time;

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200 && QS.requests.lastReqTime == time) {
        callback(xhr.responseText);
    }
}
promiseRequest: async function () {
    var time = new Date().getTime();
    QS.requests.lastReqTime = time;

    var response = await fetch(this.url + document.querySelector(".promise").value);
    var result = await response.text();
    if(QS.requests.lastReqTime == time) {
        QS.view.displayResult(result)
    }
},
→ Ссылка