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

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

     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方法执行完成之后,才会执行后面的代码。


版权声明:本文为JulyNight原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。