简单说一下异步和回调

发表于 | 分类于 |

代码的异步

假如有这样的代码

var result = '';

function writeCode(code) {
    // 里面有 setInterval
    let id = setInterval(()=> {
        //... 代码逻辑
        if (条件成立) {
            window.clearInterval(id);
        }
    }, 10);
}
function fn() {
}

// 这里调用 writeCode
writeCode(result);

// 这里再调用 fn
fn();

这里就有可能会出问题，问题是，因为 setInterval 里有设置时间，那么 writeCode 一执行，就会等待这个时间去执行它里面的代码逻辑，而这个时候 fn 早就执行了,有可能会造成页面的 bug

代码的回调

异步的关键在于 [不等结果],直接进行下一步。那要怎么样才能拿到结果，就是使用 回调, 回调是拿到异步结果的一种方式, 同时，回调也可以拿到同步结果

如何解决呢，在 writeCode 里传个函数，然后当时间到的时候直接 函数.call()，如下代码所示

var result = '';

function writeCode(code, fn) {
    // 里面有 setInterval
    let id = setInterval(()=> {
        //... 代码逻辑
        if (条件成立) {
            window.clearInterval(id);
            // 这里调用 fn
            fn.call();
        }
    }, 10);
}
function fn() {
}

// 这里调用 writeCode
writeCode(result, ()=> {
    console.log('结束');
    // 这里才调用 fn
    fn.call();
});

以上代码可以保证在 writeCode 代码结束时才执行 fn
补充: 那么怎么理解 回调也可以拿到同步结果呢

var result = 'result';
var result2 = 'result2';

function writeCode(code, fn) {
    // 里面有 setInterval
    let id = setInterval(()=> {
        //... 代码逻辑
        if (条件成立) {
            window.clearInterval(id);
            // 这里调用 fn
            fn.call();
        }
    }, 10);
}

// 参数里面添加一个回调函数
function fn(fn2) {
    fn2.call();
}

// 这里调用 writeCode
writeCode(result, ()=> {
    console.log('结束');
    // 这里才调用 fn
    fn( ()=> {
        writeCode(result, result2);
    } );
});

这里的 fn 里的回调就是同步回调

结论

  • 异步是指不用等待异步任务的结果，代码直接往下运行的操作。异步任务是被 JS 引擎放到一边，不进入主线程而进入任务队列的任务。
  • 回调是拿到异步任务结果的一种方式，只有 JS 引擎认为某个异步任务可以执行了，该任务就会通过回调的方式进入主线程执行