js中的异步编程

本文介绍了JavaScript中的异步执行机制,包括回调函数、Promise对象及事件监听三种方式,旨在解决单线程环境下任务执行的阻塞问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介

JS语言的执行环境是“单线程”。所谓单线程,就是一个时间只能完成一个任务,如果有多个任务,就必须排队。

“单线程”的坏处是:只要有一个任务耗时很长,后面的任务就必须排队等待,会拖延整个程序的执行。

为了解决这个问题,JS的任务执行模式分为两种:同步(synchronous)和异步(asynchronous)。

同步模式就是上面提到的,后面的任务等待前面的任务完成后,才能执行。程序执行顺序和程序排列顺序一致。

异步模式,每一个任务都有一个或者多个回调函数,前一任务完成,先是执行回调函数。

一,回调函数

  给耗时长的函数添加回调函数,这个回调函数是原本这个任务执行完成之后要执行的函数,来达到避免后续函数执行被前面的函数阻塞;

//f1函数是一个耗时的任务 <br data-filtered="filtered">function f1(f2){
            setTimeout( function(){
                for(var i=0;i<10000;i++){
                    console.log(i)
                }
 
            },1000);
            f2();
        }<br data-filtered="filtered"><br data-filtered="filtered">//f2函数用来改变背景颜色<br data-filtered="filtered"> function f2() {
           document.body.style.backgroundColor = "white";
        }
 
f1(f2);

这样做,达到了f2函数不被f1函数长时间的执行所阻塞,而是把耗时的程序推迟执行。

二,promise对象

  ES6新特性Promise,可以将异步操作以同步操作的流程表达出来,避免层层嵌套的回调函数。

var promise = new Promise(function(resolve,reject){
        if( /*异步操作成功*/ ){
               resolve();
        }else{
               reject();
        }
});
 
//.then方法
promise.then(
              function(){ //success  }  , 
              function(){  //failure  }
); 

new Promise()构造函数接受一个函数作为参数,这个函数又接受两个参数分别为resolve和reject方法。如果异步操作完成,就调用resolve方法将Promise对象实例的状态变为“成功”(从pending到resolved);如果异步操作失败,就用reject方法将Promise对象实例的状态变成失败(从pending到rejected)。

.then方法,分别给resolve方法和reject方法指定回调函数。

三,事件监听

  给耗时长的函数绑定一事件,事件触发后就执行后来的函数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值