【JavaScript】【5】定时器（包含回调函数与Promise）

2023-03-17 01:08| 来源: 网络整理| 查看: 265

文章目录前言一、回调函数二、 Promisepromise对象Promise对象的生成加载图片写成一个Promise 三、定时器与清除定时器的方法四、京东购物车倒计时案例五、发送验证码案例在这里插入图片描述总结

前言

什么是定时器 JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。

了解回调函数和Promise对象

一、回调函数你不知道用户何时单击按钮。因此，为点击事件定义了一个事件处理程序。该事件处理程序会接受一个函数，该函数会在该事件被触发时被调用。回调是一个简单的函数，会作为值被传给另一个函数，并且仅在事件发生时才被执行。之所以这样做，是因为 JavaScript 具有顶级的函数，这些函数可以被分配给变量并传给其他函数（称为高阶函数）。通常会将所有的客户端代码封装在 window 对象的 load 事件监听器中，其仅在页面准备就绪时才会运行 window.addEventListener('load', () => { //window 已被加载。 //做需要做的。 }) 回调无处不在，不仅在 DOM 事件中。一个常见的示例是使用定时器： setTimeout(() => { // 2 秒之后运行。 }, 2000) XHR 请求也接受回调，在此示例中，会将一个函数分配给一个属性，该属性会在发生特定事件（在该示例中，是请求状态的改变）时被调用： const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4) { xhr.status === 200 ? console.log(xhr.responseText) : console.error('出错') } } xhr.open('GET', 'http://nodejs.cn') xhr.send() 回调适用于简单的场景！但是，每个回调都可以添加嵌套的层级，并且当有很多回调时，代码就会很快变得非常复杂 window.addEventListener('load', () => { document.getElementById('button').addEventListener('click', () => { setTimeout(() => { items.forEach(item => { //你的代码在这里。 }) }, 2000) }) })

这是一个简单的四级嵌套，但是当嵌套越来越复杂时，不推荐使用多级嵌套。从 ES6 开始，JavaScript 引入了一些特性，可以帮助处理异步代码而不涉及使用回调：Promise（ES6）和 Async/Await（ES2017）。

二、 Promise promise对象

Promise对象是CommonJS工作组提出的一种规范，目的是为异步操作提供统一接口。

首先，它是一个对象，也就是说与其他JavaScript对象的用法，没有什么两样；其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。它使得异步操作具备同步操作的接口，使得程序具备正常的同步运行的流程，回调函数不必再一层层嵌套。简单说，它的思想是，每一个异步任务立刻返回一个Promise对象，由于是立刻返回，所以可以采用同步操作的流程。这个Promises对象有一个then方法，允许指定回调函数，在异步任务完成后调用。

异步操作f1返回一个Promise对象，它的回调函数f2写法如下 (new Promise(f1)).then(f2) 多层回调函数 //传统写法 step1(function(value1){ step2(value1,function(value2){ step3(value2,function(value3){ step4(value3,function(value4){ ... }) }) }) }) //Promise写法 (new Promise(step1)) .then(step2); .then(step3); .then(step4);

总的来说，传统的回调函数写法使得代码混成一团，变得横向发展而不是向下发展。Promises规范就是为了解决这个问题而提出的，目标是使用正常的程序流程（同步），来处理异步操作。它先返回一个Promise对象，后面的操作以同步的方式，寄存在这个对象上面。等到异步操作有了结果，再执行前期寄放在它上面的其他操作。

Promise对象的三种状态：异步操作“未完成”（pending）异步操作“已完成”（resolved，又称fulfilled）异步操作“失败”（rejected）三种途径的变换方式只有两种：从未完成到已完成和从未完成到失败变换方式只能发生一次，一旦状态变为"已完成"或"失败"，就意味着不会发生新的状态变化了。Promise对象的最终状态只有两种异步操作成功：Promise对象传回一个值，状态变为resolved 异步操作失败，Promise对象抛出一个错误，状态变为rejected // po是一个Promise对象 //Promise对象po使用then方法绑定两个回调函数，操作成功返回console.log，操作失败返回console.error，这两个函数都接受异步操作传回的值作为参数 po.then( console.log, console.error ); then方法可以链式使用 po .then(step1) .then(step2) .then(step3) .then{ console.log; console.error; //Promise对象的错误有传递性 }

从同步角度看等价于

try { var v1 = step1(po); var v2 = step2(v1); var v3 = step3(v2); console.log(v3); } catch (error) { console.error(error); } Promise对象的生成 var promise = new Promise(function(resolve,reject){ if(/*异步操作成功*/){ resolve(value); //在异步操作成功时调用，并将异步操作的结果，作为参数传递出去 }else{ reject(error); //在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去 } })

可以使用then方法

po.then(function(value){ //success },function(value){ //failure }); 加载图片写成一个Promise var preloadImage = function(path){ return new Promise(function(resolve,reject){ var image = new Image(); image.onload = resolve; image.onerror = reject; image.src = path; }) } 三、定时器与清除定时器的方法

1 推迟执行的代码必须以字符串的形式，放入setTimerout 因为引擎内部使用eval函数，将字符串转化为代码。

setTimeout('console.log(1)',1000)

2 如果推迟执行的是函数，则可以直接将函数名，放入setTimeout。一方面eval函数有安全顾虑，另一方面为了便于JavaScript引擎优化代码，setTimeout方法一般总是采用函数名的形式

function fn(){ console.log(2); } setTimeout(fn,1000); //或者 setTimeout(function(){ console.log(2); },1000)

3 清除定时器

function fn(){ console(2); } var timer = setTimeout(fn,1000); clearTimeout(timer); 四、京东购物车倒计时案例

布局省略代码如下（示例）：

总结

提示：这里对文章进行总结： Promise对象还需要继续学习。定时器要学会计数和清除

【本文地址】

公司简介

联系我们