Как отменить тайм-аут внутри Javascript Promise?

Редактировать 2021 все платформы используют AbortController в качестве примитива отмены, и для этого есть встроенная поддержка.

В Node.js

// import { setTimeout } from 'timers/promises' // in ESM
const { setTimeout } = require('timers/promises');
const ac = new AbortController();

// cancellable timeout
(async () => {
  await setTimeout(1000, null, { signal: ac.signal });
})();

// abort the timeout, rejects with an ERR_ABORT
ac.abort();

В браузерах

Вы можете заполнить этот API и использовать то же, что и в примере выше:

function delay(ms, value, { signal } = {}) {
    return new Promise((resolve, reject) => {
        const listener = () => {
            clearTimeout(timer);
            reject(new Error('Aborted'));
        };
        const timer = setTimeout(() => {
            signal?.removeEventListener('abort', listener);
            resolve(value);
        }, ms);
        if (signal?.aborted) {
            listener();
        }
        signal?.addEventListener('abort', listener);
    });
}

Что вы можете сделать, вы можете вернуть отмену из вашей функции timeout и вызвать ее при необходимости. Таким образом, вам не нужно хранить timeoutid глобально (или во внешней области), а также это может управлять несколькими вызовами функции. Каждый экземпляр объекта, возвращаемый функцией timeout, будет иметь свой собственный отменитель, который может выполнять отмену.

function timeout(ms) {
  var timeout, promise;

  promise = new Promise(function(resolve, reject) {
    timeout = setTimeout(function() {
      resolve('timeout done');
    }, ms);
  }); 

  return {
           promise:promise, 
           cancel:function(){clearTimeout(timeout );} //return a canceller as well
         };
}

var timeOutObj =timeout(3000); 

timeOutObj.promise.then(function(result) { 
  console.log(result); // timeout done
});

//Cancel it.
timeOutObj.cancel();

Plnkr

Однако ответ PSL правильный - есть несколько предостережений, и я бы сделал это немного по-другому.

• Очищенный тайм-аут означает, что код не будет запущен, поэтому мы должны отклонить обещание.
• В нашем случае нет необходимости возвращать две вещи, мы можем сделать обезьяний патч в JavaScript.

Здесь:

function timeout(ms, value) {
    var p = new Promise(function(resolve, reject) {
        p._timeout = setTimeout(function() {
            resolve(value);
        }, ms);
        p.cancel = function(err) {
            reject(err || new Error("Timeout"));
            clearTimeout(p._timeout); // We actually don't need to do this since we
                                      // rejected - but it's well mannered to do so
        };
    });
    return p;
}

Что позволило бы нам сделать:

var p = timeout(1500)
p.then(function(){
     console.log("This will never log");
})

p.catch(function(){
     console.log("This will get logged so we can now handle timeouts!")
})
p.cancel(Error("Timed out"));

Кто-то может быть заинтересован в полной отмене, и действительно, некоторые библиотеки поддерживают это напрямую как функцию библиотеки. На самом деле, я бы осмелился сказать, что большинство. Однако это вызывает проблемы с помехами. Цитирую KrisKowal из здесь:

Моя позиция по отмене изменилась. Теперь я убежден, что отмена (bg:, которая распространяется) по своей сути невозможна с абстракцией промисов, потому что промисы могут быть множественными зависимостями, а зависимые могут быть введены в любое время. Если какой-либо зависимый отменит обещание, он сможет помешать будущим зависимым. Есть два способа обойти проблему. Один из них — ввести отдельную «возможность» отмены, которая может быть передана в качестве аргумента. Другой заключается в том, чтобы ввести новую абстракцию, возможно, подходящую «Задачу», которая в обмен на требование, чтобы каждая задача имела только одного наблюдателя (один затем вызывается всегда), может быть отменена, не опасаясь вмешательства. Задачи будут поддерживать метод fork() для создания новой задачи, позволяя другому зависимому лицу сохранить задачу или отложить отмену.

Приведенные выше ответы @Benjamin и @PSL работают, но что, если вам нужно, чтобы отменяемый тайм-аут использовался внешним источником при внутренней отмене?

Например, взаимодействие может выглядеть примерно так:

// externally usage of timeout 
async function() {
  await timeout() // timeout promise 
} 

// internal handling of timeout 
timeout.cancel() 

Мне самому нужна была такая реализация, поэтому вот что я придумал:

/**
 * Cancelable Timer hack.
 *
 *  @notes
 *    - Super() does not have `this` context so we have to create the timer
 *      via a factory function and use closures for the cancelation data.
 *    - Methods outside the consctutor do not persist with the extended
 *      promise object so we have to declare them via `this`.
 *  @constructor Timer
 */
function createTimer(duration) {
  let timerId, endTimer
  class Timer extends Promise {
    constructor(duration) {
      // Promise Construction
      super(resolve => {
        endTimer = resolve
        timerId = setTimeout(endTimer, duration)
      })
      // Timer Cancelation
      this.isCanceled = false
      this.cancel = function() {
        endTimer()
        clearTimeout(timerId)
        this.isCanceled = true
      }
    }
  }
  return new Timer(duration)
}

Теперь вы можете использовать таймер следующим образом:

let timeout = createTimer(100)

И отмените обещание в другом месте:

 if (typeof promise !== 'undefined' && typeof promise.cancel === 'function') {
  timeout.cancel() 
}

Это мой ответ на TypeScript:

  private sleep(ms) {
    let timerId, endTimer;
    class TimedPromise extends Promise<any> {
      isCanceled: boolean = false;
      cancel = () => {
        endTimer();
        clearTimeout(timerId);
        this.isCanceled = true;
      };
      constructor(fn) {
        super(fn);
      }
    }
    return new TimedPromise(resolve => {
      endTimer = resolve;
      timerId = setTimeout(endTimer, ms);
    });
  }

Использование:

const wait = sleep(10*1000);
setTimeout(() => { wait.cancel() },5 * 1000);
await wait;