《JavaScript程序设计》课件——项目6-2 定时器.pptxVIP

JavaScript程序设计2021

1课程导入2任务导入3知识讲解4任务实施项目6-1BOM简介5任务总结

知识回顾任务导入知识讲解任务实施任务总结BOM的构成？常用的window对象事件有哪些？提问

知识回顾任务导入知识讲解任务实施任务总结任务重难点完成3s后自动关闭广告完成60s内只能发送一次短信重点：定时器定时器应用案例JS执行机制

知识回顾任务导入知识讲解任务实施任务总结定时器定时器方法如下：方法说明setTimeout()在指定的毫秒数后调用函数或执行一段代码setInterval()按照指定的周期（以毫秒计）来调用函数或执行一段代码clearTimeout()取消由setTimeout()方法设置的定时器clearInterval()取消由setInterval()设置的定时器1.1定时器方法1.定时器

知识回顾任务导入知识讲解任务实施任务总结定时器使用setTimeout()实现3秒后自动关闭广告的效果。案例代码如下：【案例】3s后自动关闭广告body??script????var?timer?=?setTimeout(fn,?3000);????function?fn(){console.log(广告关闭了);}??/script/body

知识回顾任务导入知识讲解任务实施任务总结定时器【案例】60s内只能发送一次短信实现思路：在页面中放一个文本框和一个“发送”按钮。在文本框中输入手机号码，然后单击“发送”按钮，就可以发送短信。在按钮单击之后，按钮上的文字会变为“还剩x秒再次单击”。

知识回顾任务导入知识讲解任务实施任务总结定时器实现代码如下：????var?btn?=?document.querySelector(button);????var?time?=?60;?//?定义剩下的秒数????btn.addEventListener(click,?function()?{??????btn.disabled?=?true;//此处添加timer定时器；????})

知识回顾任务导入知识讲解任务实施任务总结定时器timer定时器：??????var?timer?=?setInterval(function()?{????????if?(time?==?0)?{??????????clearInterval(timer);??????????btn.disabled?=?false;??????????btn.innerHTML?=?发送;????????}?else?{??????????btn.innerHTML?=?还剩下?+?time?+?秒;??????????time--;????????}??????},?1000);

知识回顾任务导入知识讲解任务实施任务总结JS执行机制2.JS执行机制2.1单线程单线程：JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。console.log(1);//先输出了1、2setTimeout(function(){??console.log(3);//，等待5秒后输出3},?5000);console.log(2);

知识回顾任务导入知识讲解任务实施任务总结JS执行机制2.2同步和异步同步：所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。异步：所谓异步，就是在做一件事件的同时，可以去处理其他的事情。

知识回顾任务导入知识讲解任务实施任务总结JS执行机制2.3执行机制执行栈和任务队列如下图：

知识回顾任务导入知识讲解任务实施任务总结JS执行机制通过代码演示：console.log(1);setTimeout(function(){console.log(3);},0);for(vari=0,str=;i900000;i++){str+=i; //利用字符串拼接运算拖慢执行时间}console.log(2);

知识回顾任务导入知识讲解任务实施任务总结完成3s后自动关闭广告完成60s内只能发送一次短信

知识回顾任务导入知识讲解任务实施任务总结总结：本章主要通过案例的形式讲解了定时器的应用，重点讲解了JS的执行机制。作业：完成课上两个案例。

感谢聆听2021