window定时器方法

有时我们并不想立即执行一个函数,而是等待特定一段时间之后再执行,我们称之为“计划调用(scheduling a call)”。

目前有两种方式可以实现:

  • setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
  • setInterval 允许我们重复运行一个函数,从一段时间间隔之后开始运行,之后以该时间间隔连续重复运行该函数。

并且通常情况下有提供对应的取消方法:

  • clearTimeout:取消 setTimeout 的定时器;
  • clearInterval:取消 setInterval 的定时器;

大多数运行环境都有内置的调度程序,并且提供了这些方法:

  • 目前来讲,所有浏览器以及 Node.js 都支持这两个方法;

setTimeout的使用

setTimeout 的语法如下:

  • func|code :想要执行的函数或代码字符串。
    • 一般传入的都是函数,由于某些历史原因,支持传入代码字符串,但是不建议这样做;
  • delay :执行前的延时,以毫秒为单位 (1000 毫秒 = 1 秒),默认值是 0
  • arg1 arg2…:要传入被执行函数(或代码字符串)的参数列表

clearTimeout 方法:

  • setTimeout 在调用时会返回一个 “定时器标识符 (timer identifier)”,我们可以使用它来取消执行。

setInterval 的使用

setInterval 方法和 setTimeout 的语法相同:

  • 所有参数的意义也是相同的;
  • 不过与 setTimeout 只执行一次不同,setInterval 是每间隔给定的时间周期性执行;

clearInterval方法:

  • setInterval也会返回一个“定时器标识符(timer identifier)”,我们可以通过clearInterval来取消这个定时器。

<button class="out">取消setTimeout定时器</button>  
<button class="itv">取消setInterval定时器</button>  
<script>  
// 1.setTimeout  
/* function foo() {  
 console.log('foo被调用--------')  
 }  
 var timeoutID = setTimeout(foo, 3000)  
 var timeoutBtn = document.querySelector('.out') timeoutBtn.onclick = function(event) { // 取消调度  
 clearTimeout(timeoutID) } */  
// 2.setInterval  
var itvBtn = document.querySelector('.itv')  
  
function bar(name, age, height) {  
 console.log('bar被调用---------', name, age, height)  
}  
  
var itvBtnID = setInterval(bar, 3000, 'why', 19, 1.88)  
  
itvBtn.onclick = function() {  
 clearInterval(itvBtnID)  
}  
</script>

案例实战一 – 轮播消息提示

<!doctype html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport"  
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
 <meta http-equiv="X-UA-Compatible" content="ie=edge">  
 <title>Document</title>  
 <style>  
  .tip-bar {  
      display: inline-flex;  
      align-items: center;  
      height: 30px;  
      background-color: rgba(0, 0, 0, .4);  
      border-radius: 16px;  
  }  
  img {  
      width: 30px;  
      height: 30px;  
      border-radius: 50%;  
      margin-right: 5px;  
  }  
  span {  
      font-size: 13px;  
      color: white;  
      margin-right: 8px;  
  } </style>  
</head>  
<body>  
<div class="tip-bar">  
 <img src="https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png" alt="">  
 <span>183*****624对这件商品感兴趣</span>  
</div>  
<script>  
// 1,从服务器拿到数据 ajax/fetch 请求  
let tipList = [  
 {  icon: 'https://bfs.biyao.com/group1/M01/A6/97/rBACYWBCHqyAFH5tAAANZXX5Eww646.png',  
  title: 'rinsan对这件商品感兴趣'  
 },  
 {  icon: 'https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png',  
  title: '123***814对这件商品感兴趣'  
 },  
 {  icon: 'https://bfs.biyao.com/group1/M00/7F/4E/rBACYV16HseAP-PnAAAW9bbVoKE463.png',  
  title: '刘军对这件商品感兴趣'  
 }  
]  
  
// 2.动态切换数据  
// 2.1获取到元素  
var tipBar = document.querySelector('.tip-bar')  
var imgEl = tipBar.querySelector('img')  
var spanEl = tipBar.querySelector('span')  
  
// 2.2 3切换一次数据  
var currentIndex = 0 // 记录当前展示到的索引位置  
setInterval(function() {  
 // 1> 根据索引获取 item var tipItem = tipList[currentIndex]  
  
 // 2> 给 dom 设置内容  
 imgEl.src = tipItem.icon  
 spanEl.textContent = tipItem.title  
  
 // 3> 重新计算索引  
 currentIndex++  
 if (currentIndex === tipList.length) {  
  currentIndex = 0  
 }  
}, 3000)  
// 随机  
// console.log(Math.floor(Math.random() * tipList.length))  
</script>  
</body>  
</html>

案例实战二-关闭信息弹窗

<!doctype html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport"  
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
 <meta http-equiv="X-UA-Compatible" content="ie=edge">  
 <title>Document</title>  
  
 <style>  
  .top-bar {  
      display: flex;  
      flex-direction: row;  
      align-items: center;  
      height: 45px;  
      width: 375px;  
      background-color: black;  
      /* 关键 */      overflow: hidden;  
      transition: all .5s ease-out;  
  }  
  .delete {  
      display: flex;  
      flex-direction: row;  
      justify-content: center;  
      align-items: center;  
      height: 100%;  
      width: 30px;  
      cursor: pointer;  
  }  
  .delete img {  
      height: 10px;  
      width: 10px;  
  }  
  .logo {  
      height: 30px;  
      width: 30px;  
      margin-left: 3px;  
      margin-right: 30px;  
      cursor: pointer;  
  }  
  span {  
      color: white;  
      font-size: 14px;  
      flex: 1;  
  
      white-space: nowrap;  
      overflow: hidden;  
      text-overflow: ellipsis;  
  }  
  .btn {  
      width: 94px;  
      height: 100%;  
      line-height: 45px;  
      text-align: center;  
      font-size: 14px;  
      color: #fff;  
      background-color: #F63515;  
  } </style>  
</head>  
<body>  
  
<div class="top-bar">  
 <div class="delete">  
  <img src="./img/delete.png" alt="">  
 </div>  
 <img class="logo" src="./img/logo.png" alt="">  
 <span>打开京东App,购物更轻松</span>  
 <div class="btn">立即打开</div>  
</div>  
  
<script>  
// 2.获取元素  
var topBar = document.querySelector('.top-bar')  
var deleteEl = topBar.querySelector('.delete')  
  
// 2.监听delete点击  
deleteEl.onclick = function() {  
 // topBar.remove()  
 topBar.style.height = 0  
 /*   setTimeout(function(){  
  topBar.remove()  },300) */}  
topBar.ontransitionend = function() {  
 topBar.remove()  
}  
  
</script>  
</body>  
</html>

案例实战三-侧边栏展示

<!doctype html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport"  
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
 <meta http-equiv="X-UA-Compatible" content="ie=edge">  
 <title>Document</title>  
 <style>  
  .tool-bar {  
      position: fixed;  
      top: 30%;  
      right: 0;  
  
      display: flex;  
      flex-direction: column;  
      align-items: center;  
  
      width: 35px;  
  }  
  .item {  
      position: relative;  
      width: 35px;  
      height: 35px;  
      margin-bottom: 1px;  
  
      background-color: #7a6e6e;  
      border-radius: 3px 0 0 3px;  
  }  
  .icon {  
      display: inline-block;  
      width: 100%;  
      height: 100%;  
      cursor: pointer;  
      background-image: url(./img/toolbars.png);  
  }  
  /* .icon01 {  
  background-position: -48px 0; } .icon02 {  background-position: -48px -50px; } .icon03 {  background-position: -48px -100px; } .icon04 {  background-position: -48px -150px; } */  
  .name {  
      position: absolute;  
      z-index: -1;  
      right: 35px;  
      /*left: -62px;*/  
      top: 0;  
  
      width: 0;  
      height: 35px;  
      line-height: 35px;  
  
      color: #fff;  
      text-align: center;  
      font-size: 12px;  
      background-color: #7a6e6e;  
      cursor: pointer;  
  
      border-radius: 3px 0 0 3px;  
      transition: width .2s ease;  
  }  
  .item:hover,  
  .item:hover .name {  
      background-color: #cd1926;  
  } </style>  
</head>  
<body>  
<div class="tool-bar">  
 <div class="item">  
  <i class="icon icon01"></i>  
  <div class="name">购物车</div>  
 </div>  
 <div class="item">  
  <i class="icon icon02"></i>  
  <div class="name">收藏</div>  
 </div>  
 <div class="item">  
  <i class="icon icon03"></i>  
  <div class="name">限时活动</div>  
 </div>  
 <div class="item">  
  <i class="icon icon04"></i>  
  <div class="name">大礼包</div>  
 </div>  
</div>  
  
<script>  
// 1.动态给icon设置backgroundPosition  
var iconEls = document.querySelectorAll('.icon')  
for (var i = 0; i < iconEls.length; i++) {  
 var iconEl = iconEls[i]  
 iconEl.style.backgroundPosition = `-48px -${50 * i}px`  
}  
  
// 2.实现鼠标进入动画  
// 方案一: mouseenter(不能使用事件委托)  
/* var itemEls = document.querySelectorAll('.item')  
 for (var itemEl of itemEls) { itemEl.onmouseenter = function(event) { var nameEl = this.children[1] nameEl.style.width = '62px' } itemEl.onmouseleave = function() { var nameEl = this.children[1] nameEl.style.width = '0' } } */// 方案二: 事件委托  
var toolbarEl = document.querySelector('.tool-bar')  
  
function handleMouseEvent(event, width) {  
 if (event.target !== toolbarEl) {  
  // 1.获取唯一的item  
  var itemEl = event.target.classList.contains('item') ? event.target : event.target.parentElement  
  // 2.根据item获取nameElement  
  var nameEl = itemEl.children[1]  
  // 3.设置宽度  
  nameEl.style.width = `${width}px`  
 }  
}  
  
toolbarEl.onmouseover = function(event) {  
 handleMouseEvent(event, 62)  
}  
toolbarEl.onmouseout = function(event) {  
 handleMouseEvent(event, 0)  
}  
</script>  
</body>  
</html>

购物车-数据展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      thead {
        background-color: #f5f5f5;
      }
      th,
      td {
        border: 1px solid #aaa;
        padding: 8px 12px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <h2 class="price">总价格: ¥<span class="price-count">0</span></h2>
    <script>
      // 1.从服务器获取数据 ajax/fetch
      var books = [
        {
          id: 1,
          name: "《算法导论》",
          date: "2006-09",
          price: 85.0,
          count: 3,
        },
        {
          id: 2,
          name: "《UNIX编程艺术》",
          date: "2006-02",
          price: 59.0,
          count: 2,
        },
        {
          id: 3,
          name: "《编程珠玑》",
          date: "2008-10",
          price: 39.0,
          count: 5,
        },
        {
          id: 4,
          name: "《代码大全》",
          date: "2006-03",
          price: 128.0,
          count: 8,
        },
      ];

      // 2.对数据展示
      /*
        到底通过html直接编写,还是通过JavaScript动态生成
          1.对于固定的,直接通过html编写(能通过html编写,尽量通过html直接编写)
          2.对于哪些大量的数据,有规律的数据,可以通过javascript 编写
      */
      var tbodyEl = document.querySelector("tbody");
      
      // 2.2动态添加tr以及内部数据
      for (var i = 0; i < books.length; i++) {
        var trowEl = document.createElement("tr");

        // 2.3 放具体的数据
        var book = books[i];
        var bookKeys = Object.keys(book);
        
        for (var m = 0; m < bookKeys.length; m++) {
          var key = bookKeys[m];
          var value = book[key];
          var tdEl = document.createElement("td");
          if (key === "price") {
            value = "¥" + value;
          }
          tdEl.textContent = value;
          trowEl.append(tdEl);
        }

        // 2.4 添加删除按钮
        var deleteTdEl = document.createElement("td");
        var deleteBtnEl = document.createElement("button");
        
        deleteBtnEl.textContent = "删除";
        deleteTdEl.append(deleteBtnEl);
        trowEl.append(deleteTdEl);
        
        // 2.5 监听删除按钮的点击
        deleteBtnEl.onclick = function (event) {
          // 1.删除对应的trow
          var deleteTRowEl = this.parentElement.parentElement;
          var deleteTrIndex = deleteTRowEl.sectionRowIndex;
          deleteTRowEl.remove();

          // 2.删除对应books中的数据
          books.splice(deleteTrIndex, 1);

          // 3.重新计算一次价格
          calcTotalPrice()
        };

        tbodyEl.append(trowEl);
      }

      // 3.计算总价格
      var priceCountEl = document.querySelector(".price-count");
      totalPrice = 0;
      /*      
        for (var i = 0; i < books.length; i++) {
          totalPrice += books[i].count * books[i].price;
        }
      */

      calcTotalPrice();

      //  封装计算价格的函数
      function calcTotalPrice() {
        var totalPrice = books.reduce(function (preValue, item) {
          return preValue + item.count * item.price;
        }, 0);
        priceCountEl.textContent = totalPrice;
      }
    </script>
  </body>
</html>

Q.E.D.