如何打破JavaScript中的回调链?

杜加尔公爵

我正在从浏览器上传多个文件,需要按顺序上传。

因此,我将上一个上载完成回调中的下一个上载开始链接起来。

它很简单,而且效果很好。

在上传过程中,我向用户显示进度以及取消按钮。

如果用户点击取消,我想停止整个回调链。

我该怎么做?JavaScript中是否有某种机制可以终止我的回调链?

好的,这是JavaScript中的回调链的示例。问题是,如何从“取消”按钮中断开它?

https://jsfiddle.net/jq7m9beq/

var filenamesToProcessQueue = ['v.jpg','w.jpg','x.jpg','y.jpg','z.jpg']

function finishedProcessing (filename) {
console.log('finished processing: ' + filename)
// processing finished for this file, start again by chaining to the next one
doProcessFiles()
}

function waitForEachFile (filename, callback) {
// wait a couple of seconds and log the filename
setTimeout(function(){ console.log('Waited 2 seconds for: ' + filename);callback(filename);}, 2000)

}

function doProcessFiles() {
// get next file to process and remove it from the queue at same time
filename = filenamesToProcessQueue.pop()
// if the file is undefined then the queue was empty
if (typeof filename !== 'undefined') {
console.log('Process ' + filename)
waitForEachFile(filename, finishedProcessing)
}
}

doProcessFiles()
gurvinder372

单击取消按钮时,设置一个标志

var cancelFlag = false;
document.getElementById("cancelBtn").addEventListener("click", function(){
   cancelFlag = true;
   //other code
});

将您的doProcess更改为

function doProcessFiles() 
{
    if (cancelFlag)
    {
      return false; //this will break the chain
    }
    // get next file to process and remove it from the queue at same time
    filename = filenamesToProcessQueue.pop()
    // if the file is undefined then the queue was empty
    if (typeof filename !== 'undefined') 
    {
       console.log('Process ' + filename)
       waitForEachFile(filename, finishedProcessing)
    }
}

您也可以停止等待

function waitForEachFile (filename, callback) 
{
    if (cancelFlag)
    {
        return false; //this will stop waiting as well
    }
   // wait a couple of seconds and log the filename
   setTimeout(function(){ console.log('Waited 2 seconds for: ' +   filename);callback(filename);}, 2000)
}

您可以在“取消”按钮本身中设置标志

document.getElementById("cancelBtn").setAttribute("data-flag", "true");

并检查此值

var cancelFlag = Boolean(document.getElementById("cancelBtn").getAttribute("data-flag"));

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在回调函数Node JS中打破for循环

来自分类Dev

如何在回调函数Node JS中打破for循环

来自分类Dev

如何避免异步编程中的回调链?

来自分类Dev

如何使回调函数在Javascript中同步?

来自分类Dev

JavaScript中的回调函数如何工作

来自分类Dev

如何打破承诺链

来自分类Dev

如何打破承诺链?

来自分类Dev

如何打破JavaScript中的错误

来自分类Dev

如何从JavaScript中的回调函数中获取全部数据

来自分类Dev

如何从javascript中的回调响应数组中检索值

来自分类Dev

扭曲:如何在延迟时中断回调链

来自分类Dev

取消JavaScript中的回调

来自分类Dev

JavaScript回调中的冒号

来自分类Dev

JavaScript中的动态回调

来自分类Dev

javascript:如何使用抑制回调中的异常的库?

来自分类Dev

在Handlebars中渲染部分时如何执行Javascript回调

来自分类Dev

如何访问JavaScript事件的回调函数中的变量?

来自分类Dev

在Handlebars中渲染部分时如何执行Javascript回调

来自分类Dev

如何使Visual Studio Intellisense显示javascript回调中的属性?

来自分类Dev

如何在$ .Deferred.then中执行异步操作,然后执行failFilter回调并传递回成功链?

来自分类Dev

如何使用回调命令命令中的事件链?

来自分类Dev

蓝鸟-如何尽早打破承诺链

来自分类Dev

如何打破猫鼬的承诺链

来自分类Dev

如何打破超类构造函数链?

来自分类Dev

蓝鸟-如何尽早打破承诺链

来自分类Dev

发生异常时如何打破任务链?

来自分类Dev

如何实现JavaScript样式的回调?

来自分类Dev

回调中的Javascript变量范围?

来自分类Dev

Javascript中异步请求的“条件”回调