取消请求的例子

最新推荐文章于 2021-11-03 12:20:34 发布

一只特立独行的猫猫

最新推荐文章于 2021-11-03 12:20:34 发布

阅读量119

点赞数

文章标签： js

本文链接：https://blog.csdn.net/fhjdzkp/article/details/120718410

版权

本文介绍了如何使用JavaScript创建一个可取消的延迟任务，通过cancellableDelayedResolve函数实现延迟执行并能根据用户操作灵活取消。涉及Promise、CancelToken和前端事件监听。

摘要由CSDN通过智能技术生成


test = (flag) => {
    class CancelToken {
        constructor(cancelFn) {
            this.promise = new Promise((resolve, reject) => {
                cancelFn(() => {
                    setTimeout(console.log, 0, "delay cancelled"); resolve();
                })
            })
        }
    }

    const startButton = document.querySelector('#start');
    const cancelButton = document.querySelector('#cancel');

    function cancellableDelayedResolve(delay) {
        setTimeout(console.log, 0, "set delay");
        return new Promise((resolve, reject) => { 
            const id = setTimeout((() => {
                setTimeout(console.log, 0, "delayed resolve");
                resolve();
            }), delay);
            const cancelToken = new CancelToken(
                // (cancelCallback) => cancelButton.addEventListener("click", cancelCallback)
                (cancelCallback) => {
                    console.log(cancelCallback)
                }
            );
            cancelToken.promise.then(() => clearTimeout(id));
        });
    }

    startButton.addEventListener("click", () => cancellableDelayedResolve(1000));
}

cancelRequest = () => {
    new Promise((resolve, reject) => {
        console.log("已经开始发请求啦");
        setTimeout(() => {
            resolve();
        }, 8000)
    })
}

取消请求 的例子

取消请求的例子