【前端入门】浏览器事件，都必须是异步执行

Cammmi在努力
45 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

回顾：前期在浏览器的章节，学习了浏览器的对象、关于DOM的基础和操作表单知识。本期关注“浏览器事件的执行限制”。

浏览器事件，都必须是异步执行

由于JS所有代码都是单线程执行，浏览器事件，都必须是异步执行。异步执行可以用回调函数

例如：

function callback() {
    console.log('finish');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); // 1秒钟后调用callback函数
console.log('after setTimeout()');

before setTimeout()
after setTimeout()
//1秒钟后出现finish

从实际运行的情况来看，异步操作会在某个时间点触发一个函数进行调用

什么是“Promise”

JavaScript中称“承诺将来会执行”的对象”为Promise对象

廖老师给了个简单的Promise例子：生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败。然后可以用一个Promise对象来执行它，并在将来某个时刻获得成功或失败的结果。

function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
    console.log('Done：' + result);
});
var p3 = p2.catch(function (reason) {
    console.log('Failed：' + reason);
});

也就是说，会有以下2种结果：

// 如果成功，执行这个函数：
p1.then(function (result) {
    console.log('成功：' + result);
});

//如果失败，告诉promise对象
p2.catch(function (reason) {
    console.log('失败：' + reason);
});

在廖老师的论坛随机run了一次，结果是.....也就是对应timeout<1的情况，显示Done：200 OK

image.png

可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了

image.png

(例题及图片参考来源于：www.liaoxuefeng.com/wiki/102291…

Promise甚至还可以做更多的事情。下次我们来分析：若干个一步任务，如何不在写“一层层嵌套代码”的情况下，保障任何任务失败则不再继续并执行错误处理函数～

写在最后

以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接，感谢廖大神出题和解答：

www.liaoxuefeng.com/wiki/102291…

avatar
文章
阅读
粉丝