Обновление (2017 г.)
Здесь, в 2017 году, обещания встроены в JavaScript, они были добавлены спецификацией ES2015 (полифиллы доступны для устаревших сред, таких как IE8-IE11). Синтаксис, который они использовали, использует обратный вызов, который вы передаете в Promiseконструктор ( Promise исполнитель ), который получает функции для разрешения / отклонения обещания в качестве аргументов.
Во-первых, поскольку asyncтеперь имеет значение в JavaScript (хотя это всего лишь ключевое слово в определенных контекстах), я собираюсь использовать laterв качестве имени функции, чтобы избежать путаницы.
Базовая задержка
При использовании собственных обещаний (или верного полифилла) это будет выглядеть так:
function later(delay) {
return new Promise(function(resolve) {
setTimeout(resolve, delay);
});
}
Обратите внимание, что это предполагает версию setTimeout, совместимую с определением для браузеров, где setTimeoutне передаются никакие аргументы обратному вызову, если вы не дадите их после интервала (это может быть неверно в средах, отличных от браузера, и раньше не было правда в Firefox, но есть сейчас; это правда в Chrome и даже в IE8).
Базовая задержка со значением
Если вы хотите, чтобы ваша функция опционально передавала значение разрешения в любом не очень современном браузере, который позволяет вам давать дополнительные аргументы setTimeoutпосле задержки, а затем передает их в обратный вызов при вызове, вы можете сделать это (текущие Firefox и Chrome; IE11 + , предположительно Edge; не IE8 или IE9, не знаю об IE10):
function later(delay, value) {
return new Promise(function(resolve) {
setTimeout(resolve, delay, value);
});
}
Если вы используете стрелочные функции ES2015 +, это может быть более кратко:
function later(delay, value) {
return new Promise(resolve => setTimeout(resolve, delay, value));
}
или даже
const later = (delay, value) =>
new Promise(resolve => setTimeout(resolve, delay, value));
Аннулируемая задержка со стоимостью
Если вы хотите, чтобы можно было отменить тайм-аут, вы не можете просто вернуть обещание из later, потому что обещания не могут быть отменены.
Но мы можем легко вернуть объект с помощью cancelметода и метода доступа для обещания и отклонить обещание при отмене:
const later = (delay, value) => {
let timer = 0;
let reject = null;
const promise = new Promise((resolve, _reject) => {
reject = _reject;
timer = setTimeout(resolve, delay, value);
});
return {
get promise() { return promise; },
cancel() {
if (timer) {
clearTimeout(timer);
timer = 0;
reject();
reject = null;
}
}
};
};
Живой пример:
const later = (delay, value) => {
let timer = 0;
let reject = null;
const promise = new Promise((resolve, _reject) => {
reject = _reject;
timer = setTimeout(resolve, delay, value);
});
return {
get promise() { return promise; },
cancel() {
if (timer) {
clearTimeout(timer);
timer = 0;
reject();
reject = null;
}
}
};
};
const l1 = later(100, "l1");
l1.promise
.then(msg => { console.log(msg); })
.catch(() => { console.log("l1 cancelled"); });
const l2 = later(200, "l2");
l2.promise
.then(msg => { console.log(msg); })
.catch(() => { console.log("l2 cancelled"); });
setTimeout(() => {
l2.cancel();
}, 150);
Оригинальный ответ от 2014 г.
Обычно у вас есть библиотека обещаний (одна, которую вы пишете сами, или одна из нескольких). В этой библиотеке обычно есть объект, который вы можете создать, а затем «разрешить», и этот объект будет иметь «обещание», которое вы можете получить от него.
Тогда laterбудет выглядеть примерно так:
function later() {
var p = new PromiseThingy();
setTimeout(function() {
p.resolve();
}, 2000);
return p.promise();
}
В комментарии к вопросу я спросил:
Вы пытаетесь создать свою собственную библиотеку обещаний?
и ты сказал
Я не был, но теперь я думаю, это именно то, что я пытался понять. Вот как это сделает библиотека
Чтобы помочь этому пониманию, вот очень простой пример, который удаленно не совместим с Promises-A: Live Copy
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Very basic promises</title>
</head>
<body>
<script>
(function() {
var PromiseThingy = (function() {
function triggerCallback(callback, promise) {
try {
callback(promise.resolvedValue);
}
catch (e) {
}
}
function Promise() {
this.callbacks = [];
}
Promise.prototype.then = function(callback) {
var thispromise = this;
if (!this.resolved) {
this.callbacks.push(callback);
}
else {
setTimeout(function() {
triggerCallback(callback, thispromise);
}, 0);
}
return this;
};
function PromiseThingy() {
this.p = new Promise();
}
PromiseThingy.prototype.resolve = function(value) {
var n;
if (!this.p.resolved) {
this.p.resolved = true;
this.p.resolvedValue = value;
for (n = 0; n < this.p.callbacks.length; ++n) {
triggerCallback(this.p.callbacks[n], this.p);
}
}
};
PromiseThingy.prototype.promise = function() {
return this.p;
};
return PromiseThingy;
})();
function later() {
var p = new PromiseThingy();
setTimeout(function() {
p.resolve();
}, 2000);
return p.promise();
}
display("Start " + Date.now());
later().then(function() {
display("Done1 " + Date.now());
}).then(function() {
display("Done2 " + Date.now());
});
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
</script>
</body>
</html>