BOM重要知识讲解（系统对话框、history对象、间歇调用和超时调用、防抖和节流）

1.系统对话框

confirm()

确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。

<script>
  var result = confirm('你确定吗?');
  if (result) {
    console.log('确定');
  }else{
    console.log('取消');
  }
</script>

prompt()

提示框，通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。

<script>
  var result = prompt("你是谁?");
  if (result) {
    console.log(result);
  }else{
    console.log('取消');
  }
</script>

2.history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进。

history对象主要有三个方法：

back()

加载 history 列表中的前一个 URL

forward()

加载 history 列表中的下一个 URL

go()

加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

3.间歇调用和超时调用

setTimeout()

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID)来清除，以下代码表示打印之后一秒过后清除

<script>
  var id = setTimeout(() => {
    console.log('Hello World');
  }, 1000);
  console.log(id);
  // 清除超时调用
  clearTimeout(id);
</script>

setInterval()

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

<script>
  var div = document.createElement('div');
  // 间歇调用
  var id = setInterval(() => {
    div.innerHTML = new Date().toLocaleString();
  }, 1000);
  document.body.appendChild(div);
  // 清除计时器
  clearInterval(id);
</script>

4.防抖和节流

防抖和节流的方式可以减少调用频率但不影响实际效果

函数防抖

定义是单位时间内频繁触发事件，以最后一次触发为准。那么怎么实现防抖呢？

首先要声明一个全局变量来存储定时器ID，每次触发都清除上一次的定时器再开启本次定时器

<input type="text" name="" id="inp">
<script>
  //输入框事件
  //声明全局变量存储定时器ID
  var timeID = null
  // 获取输入框节点
  var inp = document.getElementById('inp')
  // 输入框输入事件
  inp.oninput = function () {
    //1.先清除之前的定时器
    clearTimeout(timeID)
    //2.开启本次定时器
    timeID = setTimeout(() => {
      console.log(`输入的内容是${this.value}`)
    }, 500)
  }
</script>

函数节流

单位时间频繁触发一个事件只会触发一次

实现方法：

先声明一个全局变量存储触发事件，每一次触发事件都获取当前时间，然后判断当前时间与上一次触发事件是否超过时间间隔，超过就执行事件处理代码，最后存储本次触发的时间

<button id="btn">点击</button>
<script>
  //声明一个全局变量存储触发时间
  let lastTime = null
  // 获取按钮节点
  var btn = document.getElementById('btn')
  //页面滚动事件
  btn.onclick = function () {
    //1.每一次触发 先获取本次时间戳
    let currentTime = Date.now()
    //2.判断当前时间 与 上次触发时间 是否超过间隔
    if (currentTime - lastTime >= 3000) {
      console.log(this.innerHTML)
      //3.存储本次的触发时间
      lastTime = currentTime
    }
  }
</script>