如何实现可取消，有序的承诺？

Question

我已经把一个例子来说明什么，我在得到：

function onInput(ev) { 
 
    let term = ev.target.value; 
 
    console.log(`searching for "${term}"`); 
 
    getSearchResults(term).then(results => { 
 
    console.log(`results for "${term}"`,results); 
 
    }); 
 
} 
 

 
function getSearchResults(term) { 
 
    return new Promise((resolve,reject) => { 
 
    let timeout = getRandomIntInclusive(100,2000); 
 
    setTimeout(() => { 
 
     resolve([term.toLowerCase(), term.toUpperCase()]); 
 
    }, timeout); 
 
    
 
    }); 
 
} 
 

 
function getRandomIntInclusive(min, max) { 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
}

<input onInput="onInput(event)">

键入“搜索”框，看控制台。搜索结果不合时宜！

当有新的输入并保证结果回来时，我们如何取消任何未决的承诺？

Answer 1

一个可行的解决方案是包括一个latestTimestamp，并简单地忽略任何与早期时间戳（并因此过时）进来的响应。

let latestTimestamp = 0; 
 

 
function onInput(ev) { 
 
    let term = ev.target.value; 
 
    console.log(`searching for "${term}"`); 
 
    latestTimestamp = Date.now(); 
 
    getSearchResults(term, latestTimestamp).then(results => { 
 
    if (results[2] !== latestTimestamp) { 
 
     console.log("Ignoring old answer"); 
 
    } else { 
 
     console.log(`results for "${term}"`, results); 
 
    } 
 
    }); 
 
} 
 

 
function getSearchResults(term, latestTimestamp) { 
 
    return new Promise((resolve, reject) => { 
 
    let timeout = getRandomIntInclusive(100, 2000); 
 
    setTimeout(() => { 
 
     resolve([term.toLowerCase(), term.toUpperCase(), latestTimestamp]); 
 
    }, timeout); 
 

 
    }); 
 
} 
 

 
function getRandomIntInclusive(min, max) { 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
}

<input onInput="onInput(event)">

Answer 2

你不应该在承诺使用setTimeout的你正在做的方式，因为从.then您返回从.setTimeout()回调这是行不通的扰乱了订购。为了使承诺去为了你应该做一个函数如下所示：

function wait(n){ 
    return new Promise(function(resolve){ 
     setTimeout(resolve, n) 
    }); 
} 

，并与该功能替代setTimeout()就像如下图所示：

wait(getRandomIntInclusive(100,2000)).then(function(){ 
    // code 
}); 

Answer 3

您可以使用async包 - 一堆维护异步代码的工具。它最初是为node.js开发的，但它也可以用于前端。
您需要series功能，它保存了承诺的顺序。以下是在CoffeeScript的一个简单的例子：

async.series([ 
    -> 
    ### do some stuff ### 
    Q 'one' 
    -> 
    ### do some more stuff ... ### 
    Q 'two' 
]).then (results) -> 
    ### results is now equal to ['one', 'two'] ### 
    doStuff() 
    .done() 

### an example using an object instead of an array ### 
async.series({ 
    one: -> Q.delay(200).thenResolve(1) 
    two: -> Q.delay(100).thenResolve(2) 
}).then (results) -> 
    ### results is now equal to: {one: 1, two: 2} ### 
    doStuff() 
    .done() 

见caolan.github.io/async/

Answer 4

代替使用反跳，或超时，我设置状态 外 内（建议少量由Jaromanda X）使用引用函数的函数。这样，您可以将函数引用更改为类似noop的东西。承诺仍然解决，但不会采取任何行动。然而，最后一节不会改变其功能参考：

var onInput = function() { 
 
    let logger = function(term, results) { 
 
    console.log(`results for "${term}"`, results); 
 
    }; 
 
    let noop = Function.prototype; 
 
    let lastInstance = null; 
 

 
    function ActionManager(action) { 
 
    this.action = action; 
 
    } 
 

 
    return function onInput(ev) { 
 
    let term = ev.target.value; 
 
    console.log(`searching for "${term}"`); 
 

 
    if (lastInstance) { 
 
     lastInstance.action = noop; 
 
    } 
 

 
    let inst = new ActionManager(logger.bind(null, term)); 
 
    lastInstance = inst; 
 

 
    getSearchResults(term).then(response => inst.action(response)); 
 
    } 
 
}(); 
 

 

 

 
/**************************************** 
 
* The rest of the JavaScript is included only for simulation purposes 
 
****************************************/ 
 

 
function getSearchResults(term) { 
 
    return new Promise((resolve, reject) => { 
 
    let timeout = getRandomIntInclusive(100, 2000); 
 
    setTimeout(() => { 
 
     resolve([term.toLowerCase(), term.toUpperCase()]); 
 
    }, timeout); 
 

 
    }); 
 
} 
 

 
function getRandomIntInclusive(min, max) { 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
}

<input onInput="onInput(event)">

Answer 5

您可以使用Promise.race取消先前链的影响：

let cancel =() => {}; 
 

 
function onInput(ev) { 
 
    let term = ev.target.value; 
 
    console.log(`searching for "${term}"`); 
 
    cancel(); 
 
    let p = new Promise(resolve => cancel = resolve); 
 
    Promise.race([p, getSearchResults(term)]).then(results => { 
 
    if (results) { 
 
     console.log(`results for "${term}"`,results); 
 
    } 
 
    }); 
 
} 
 

 
function getSearchResults(term) { 
 
    return new Promise(resolve => { 
 
    let timeout = 100 + Math.floor(Math.random() * 1900); 
 
    setTimeout(() => resolve([term.toLowerCase(), term.toUpperCase()]), timeout); 
 
    }); 
 
}

<input onInput="onInput(event)">

这里我们通过注入undefined结果和测试。