Как замкнуть функцию что бы иметь доступ к внешним переменным?
Я отправляю запросы на сервер и получаю от него ответы, которые вывожу на экран. Ответы могут прийти в разное время. Поэтому я хочу сохранять время каждого запроса в переменную, что бы отслеживать какой ответ является наиболее актуальным. Я понимаю, что нужно замкнуть функции 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)
}
},