javascript如何在foreach循环完成之后执行一个回调函数

 更新时间:2023年11月24日 10:53:27   作者:Hansel.Wn  
forEach()是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,下面这篇文章主要给大家介绍了关于javascript如何在foreach循环完成之后执行一个回调函数的相关资料,需要的朋友可以参考下

常规方法

代码如下面demo所示,在foreach的回调函数中进行判断,当循环到数组最后一位元素的时候,执行回调函数:

function callBack(){
	console.log('all done');
}

function f(){
    var count = 0;
    var arrTemp = [1, 2, 3];
    arrTemp.forEach((item, index, arr) => {
        count++;
        if(count === arr.length){
            this.callBack();
        }
    })    
}

f()

使用Promise实现

实际工作中,当目标数组的元素内容比较复杂,在回调函数中没有办法进行简单的逻辑判断时,可以使用Promise.all 方法实现:

Promise.all(
    [1,2,3].map((item) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("in async function, item is" + item);
                resolve(item)
            },Math.random()*2000)
        })
    })
).then((result) => {
    console.log("all done");
    console.log("result are:", result);
})

总结

到此这篇关于javascript如何在foreach循环完成之后执行一个回调函数的文章就介绍到这了,更多相关foreach循环完成后执行回调函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS使用可选链操作符 (?.) 进行空值检查的操作

    JS使用可选链操作符 (?.) 进行空值检查的操作

    在 JavaScript 中,处理嵌套对象或数组时,经常会遇到空值检查的问题,传统的空值检查通常比较繁琐,容易导致代码冗长且难以阅读,ES2020 引入了可选链操作符 (?.),极大地简化了这些检查过程,本文介绍了JS使用可选链操作符 (?.) 进行空值检查的操作
    2024-12-12
  • 用于节点操作的API,颠覆原生操作HTML DOM节点的API

    用于节点操作的API,颠覆原生操作HTML DOM节点的API

    敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中,软件项目的构建被切分成多个子项目,各个子项目的成果都经过测试,具备集成和可运行的特征。
    2010-12-12
  • 利用TypeScript编写贪吃蛇游戏

    利用TypeScript编写贪吃蛇游戏

    这篇文章主要为大家详细介绍了如何利用TypeScript编写贪吃蛇游戏,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
    2022-09-09
  • javascript firefox不显示本地预览图片问题的解决方法

    javascript firefox不显示本地预览图片问题的解决方法

    在Firefox一直不能用js做出图片预览的效果,下面这个即可解决,用替换的方法实现firefox支持得的路径格式
    2008-11-11
  • 使用 js 简单的实现 bind、call 、aplly代码实例

    使用 js 简单的实现 bind、call 、aplly代码实例

    这篇文章主要介绍了使用 js 简单的实现 bind、call 、aplly代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript改变CSS样式的方法汇总

    JavaScript改变CSS样式的方法汇总

    JavaScript修改CSS有4种方法:1.修改节点style(内联样式);2.改变节点class或id;3.写入新的css;4.替换页面中的样式表。今天主要给大家介绍下前2种,因为后两种个人不是很推荐大家使用
    2015-05-05
  • javascript设置文本框光标的方法实例小结

    javascript设置文本框光标的方法实例小结

    这篇文章主要介绍了javascript设置文本框光标的方法,结合实例形式总结分析了javascript针对文本框光标的位置、设置及文本操作的相关技巧,需要的朋友可以参考下
    2016-11-11
  • 详解Javascript继承的实现

    详解Javascript继承的实现

    这篇文章主要介绍了详解Javascript继承的实现的相关资料,需要的朋友可以参考下
    2016-03-03
  • 浅谈JavaScript超时调用和间歇调用

    浅谈JavaScript超时调用和间歇调用

    JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。
    2015-08-08
  • TypeScript 类型收窄的具体使用

    TypeScript 类型收窄的具体使用

    类型收窄是TypeScript类型系统中最为核心和强大的特性之一,本文主要介绍了TypeScript 类型收窄的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2026-03-03

最新评论