Promise扩展-Promise取消

这个类包装了一个期约，把解决方法暴露给了cancelFn参数。这样，外部代码就可以向构造函数中传入一个函数，从而控制什么情况下可以取消期约

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id='start'>Start</button>
    <button id="cancel">Cancel</button>
</body>
<script>
    class CancelToken{
        constructor(cancelFn){
            this.promise = new Promise((resolve, reject) =>{
                cancelFn(()=>{
                    setTimeout(console.log,0,"delay cenceled")
                    resolve()
                })
            })
        }
    }
    const startBtn=document.querySelector('#start')
    const cancelBtn=document.querySelector('#cancel')
    function cancellabelDelayedResolve(delay){
        setTimeout(console.log,0,'set delay')
        return new Promise((resolve,reject)=>{
            const id=setTimeout(()=>{
                setTimeout(console.log,1000,'delayed resolve')
                resolve()
            },delay);
            const cancelToken=new CancelToken((cancelCallback)=>cancelBtn.addEventListener('click',cancelCallback))
            cancelToken.promise.then(()=>clearTimeout(id))
        })
    }
    startBtn.addEventListener('click',()=>cancellabelDelayedResolve(1000))
</script>
</html>

zhuanghaixin / Interview

Promise扩展-Promise取消 #220