/****************** 同步回调 ************************/ var syncFun = function(callback) { var start = new Date(); while(new Date() - start < 1000) { // delay 1 sec ; } callback(); console.log('同步方法返回'); // 2 }; syncFun(function() { console.log('这是同步回调'); // 1 }); console.log('同步方法会阻塞当前逻辑'); // 3 /****************** 异步回调 ************************/ var asyncFun = function(callback) { setTimeout(callback, 1000); // delay 1 sec console.log('异步方法返回'); // 4 }; asyncFun(function() { console.log('这是异步回调'); // 6 }); console.log('异步方法不会阻塞当前逻辑'); // 5 分析: 第一个同步的例子中,传入的回调函数在同步方法(syncFun)运行完成后才被调用,调用后同步方法结束并返回。 而在异步的例子中,异步方法调用后立即返回,异步事件完成后(这里用setTimeout超时事件模拟,实际还可以是Ajax、用户行为事件等异步事件),传入的回调函数才会被调用,在此期间,代码执行逻辑不会被阻塞。 请注意同步方法执行顺序(1~3)和异步方法执行顺序(4~6)的差别。
分析:
第一个同步的例子中,传入的回调函数在同步方法(
syncFun
)运行完成后才被调用,调用后同步方法结束并返回。而在异步的例子中,异步方法调用后立即返回,异步事件完成后(这里用
setTimeout
超时事件模拟,实际还可以是Ajax、用户行为事件等异步事件),传入的回调函数才会被调用,在此期间,代码执行逻辑不会被阻塞。请注意同步方法执行顺序(1~3)和异步方法执行顺序(4~6)的差别。