使用回调函数的方法处理异步问题,让js先执行完一个函数后再执行后面的逻辑或者方法

本文通过一个JavaScript示例展示了如何使用定时器(setTimeout)进行异步操作,并通过回调函数确保正确处理延迟赋值的情况。

首先我们先来看下面的栗子:

     const assignmentAction = (par) =>{
                 let str = '';
                 const loop = setTimeout(() => {
                 str = par;
                }, 1000);
              return str;
          }
          const output = ()=>{
            const res = assignmentAction('我是赋值后的参数');
            console.log('输出结果---->',res);
          }
          output();

在这里插入图片描述
很明显输出结果是空,为什么会导致这种情况呢?因为当我们在调用赋值面的方法的时候,赋值方法里面我设置了一个定时器,赋值的操作是要在一秒后才会执行,但是这个时候,后面的在控制台打印的这个方法并不会等到上面的赋值结果后再去执行,而是直接执行了,所以在没有赋值完成,下面的语句就执行了,自然就拿不到赋值以后的值。
那怎么办呢,这个时候我们可以通过回调方法来实现这个逻辑,我们在上面的方法传入一个回调方法去把这个值拿到,举个栗子:

         const assignmentAction = (par,callback) =>{
                 let str = '';
                 const loop = setTimeout(() => {
                 str = par;
                 callback(str); // 将结果传入到回调方法内
                }, 1000);      
          }
          const output = ()=>{
               const res = assignmentAction('我是赋值后的参数',(data)=>{
               console.log('输出结果---->',data);
            }); // 第二个参数为回调方法
          }
          output();

在这里插入图片描述
他会等到前面assignmentAction方法执行完成之后,才会执行后面的代码。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值