一、定时器:

setTimeout

  1. // 1. setTimeout(function () {}, 时间毫秒数) 等时间到了,执行一次回调函数。返回定时器 ID;
  2. var timerId = setTimeout(function () {
  3. // 这个回调函数中写你想时间到了做的事情
  4. console.log('没时间了');
  5. }, 3000);
  6. var timerId2 = setTimeout(function () {
  7. console.log('timer 2');
  8. }, 4000);
  9. console.log(timerId);
  10. console.log(timerId2);

setInterval

  1. // 2. setInterval(function () {}, 时间间隔毫秒数); 每隔时间间隔都执行一次回调函数;返回值也是定时 器 id;
  2. var timerId3 = setInterval(function () {
  3. console.log('inteval的时间到了');
  4. }, 1000);
  5. console.log(timerId3);
  6. // 定时器清除:想让定时器停止,就是清除定时器。清除定时器也有两种办法:
  7. // 1. clearTimeout(定时器 ID) 清除 setTimeout() 设置的定时器
  8. clearTimeout(timerId);
  9. // 2. clearInterval(定时器 id);清除 setInterval() 设置的定时器
  10. clearInterval(timerId3);

定时器是异步编程的

案例:倒计时

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. #timeBox {
  8. margin: 20px auto;
  9. height: 100px;
  10. width: 300px;
  11. line-height: 100px;
  12. font-size: 25px;
  13. text-align: center;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="timeBox">--:--:--</div>
  19. <script src="倒计时.js"></script>
  20. </body>
  21. </html>
  1. /*
  2. * 目标:
  3. * 1. 理解倒计时原理
  4. * 2. 练习 Date 实例对象的方法
  5. * 3. 掌握剩余时分秒的计算
  6. * */
  7. // 需求:实现一个距离目标时间的倒计时,每隔一秒钟更新一次。倒计时到0时停止倒计时。把倒计时效果插入到页面中。
  8. // 目标时间:2019-05-23 13:00:00
  9. // 原理:计算从当前时间到目标时间的时间差,然后把这个时间差换算成多少小时,多少分钟,多少秒;
  10. var timeBox = document.getElementById('timeBox');
  11. function countDown() {
  12. // 1. 计算当前时间距离目标时间的毫秒时间差
  13. var curDate = new Date(); // 获取当前时间
  14. var curStamp = curDate.getTime(); // 获取当前时间的时间戳
  15. var targetDate = new Date('2019-05-23 14:00:00'); // new Date() 可以把时间格式的字符串转换成标准时间格式对象。因为只有标准时间格式的对象才能调用 getTime()
  16. var targetStamp = targetDate.getTime(); // 获取目标时间的时间戳
  17. var spanStamp = targetStamp - curStamp; // 目标时间减去当前时间的毫秒差
  18. // spanStamp 小于等于0,表示已经到达或者超过目标时间了,此时应该停止倒计时。
  19. if (spanStamp <= 0) {
  20. // 停止倒计时,并且页面中的倒计时更新成 '00:00:00',终止后面的代码执行
  21. clearInterval(timerId);
  22. timeBox.innerHTML = '00:00:00';
  23. return;
  24. }
  25. // 2. 把毫秒差换算成小时、分钟、秒
  26. // 2.1 小时
  27. var hours = Math.floor(spanStamp / (60 * 60 * 1000)); // 用毫秒时间差 除以 一个小时的毫秒数
  28. // 2.2 分钟
  29. var hMs = hours * 60 * 60 * 1000; // 小时占用的毫秒数
  30. var mins = Math.floor((spanStamp - hMs) / (1000 * 60)); // 用总毫秒时间差 - 小时占用的毫秒数再除以 一分钟的毫秒数
  31. // 2.3 秒数
  32. var minsMs = mins * 1000 * 60; // 计算分钟数占用的毫秒数
  33. var secs = Math.floor((spanStamp - hMs - minsMs) / 1000);
  34. // 3 判断时分秒是否是各位数字,如果是个位数就需要补零;
  35. // hours = hours < 10 ? '0' + hours : hours;
  36. // mins = mins < 10 ? '0' + mins : mins;
  37. // secs = secs < 10 ? '0' + secs : secs; 当重复代码过多时,就需要封装成一个函数
  38. hours = addZero(hours);
  39. mins = addZero(mins);
  40. secs = addZero(secs);
  41. timeBox.innerHTML = `${hours}:${mins}:${secs}`;
  42. // timeBox.innerHTML = hours + ':' + mins + ':' + secs;
  43. }
  44. function addZero(num) {
  45. return num < 10 ? '0' + num : num;
  46. }
  47. countDown();
  48. var timerId = setInterval(countDown, 1000);

二、方法:数组去重

方案一

  1. /*
  2. * 方案一
  3. * 循环原有数组中的每一项,每拿到一项都往新数组中添加
  4. * 添加之前验证新数组中是否存在这一项,不存在再增加
  5. */
  6. let newAry = [];
  7. for (let i = 0; i < ary.length; i++) {
  8. // 循环获取原有数组中的每一项
  9. let item = ary[i];
  10. // 验证新数组中是否存在这一项
  11. if (newAry.includes(item)) {
  12. // 存在这一项,不在增加到新数组中,继续下一轮循环即可
  13. continue;
  14. }
  15. // 新数组中不存在这一项,我们加入到新数组中即可
  16. newAry.push(item);
  17. }
  18. console.log(newAry);
  19. /* 1. 基于 es6 的 Set (对应的是 Map)
  20. * 因为 new Set 自带去重效果,但去重后是个对象
  21. * 所以把每一项用展开运算符(...)写到数组里
  22. */
  23. let ary1 = [1, 3, 4, 5, 1, 5, 8, 7, 9, 8, 5, 35];
  24. console.log("Set 类去重:");
  25. ary1 = [...new Set(ary1)];
  26. console.log(ary1);
  27. // Set 也可以用来字符串去重
  28. console.log('去重字符串');
  29. console.log([...new Set('ababbc')].join(''));
  1. // 简化代码
  2. let newAry = [];
  3. ary.forEach(item => {
  4. if (newAry.includes(item)) return;
  5. newAry.push(item);
  6. });
  7. console.log(newAry);

方案二

  1. /*
  2. * 方案二:双 for 去重
  3. * 先分别拿出数组中的每一项 A
  4. * 用这一项 A 和 “它后面的每项” 依次进行比较,如果遇到和当前项 A 相同的,则在原来数组中把这一项移除
  5. *
  6. * 不用 includes / indexOf(这样保证兼容性)
  7. */
  8. var ary = [1, 2, 3, 1, 2, 1, 2, 3, 2, 1, 2, 3];
  9. for (var i = 0; i < ary.length; i++) {
  10. // item:每一次循环拿出来的当前项
  11. // i:当前项的索引 i+1:代表后一项
  12. var item = ary[i];
  13. // 让当前项和后面的每一项进行比较(循环)
  14. for (var j = i + 1; j < ary.length; j++) {
  15. // compare:后面拿出来要比较的每一项
  16. var compare = ary[j];
  17. // 如果 compare 和 item 相等,说明这一项是重复的,我们把它删掉
  18. if (compare === item) {
  19. // j 索引这一项要从数组中移除
  20. ary.splice(j, 1);
  21. // 数组塌陷了:j后面的每一项索引都提前了一位,下一次要比较的应该还是j这个索引的内容
  22. j--;
  23. }
  24. }
  25. }
  26. console.log(ary);
  1. // 封装一个方法
  2. function unique(ary) {
  3. let obj = {};
  4. for (let i = 0; i < ary.length; i++) {
  5. let item = ary[i];
  6. if (obj[item] !== undefined) {
  7. ary[i] = ary[ary.length - 1];
  8. ary.length--;
  9. i--;
  10. continue;
  11. }
  12. obj[item] = item;
  13. }
  14. return ary;
  15. }

数组去重.png