js第十二天

定时器

　　两种定时器

　　　　　　1、setTimeout()：window.setTimeout(调用函数， [延迟的毫秒数])，该定时器在定时器到期会执行调用函数。调用的函数可以是匿名函数，也可以是函数名。

　　　　　　　　　　　　　　延迟的毫秒可以不写，默认为 0。定时器在一个页面里可能有很多个，所以要给定时器赋值一个标识符。

　　　　　　　　

　　　　　　　　清除 setTimeout 定时器：window.clearTimeout( 定时器的名字 )

  <button>点击</button>
  <script>
    let time = setTimeout(() => {
      console.log('要清除这个定时器');
    }, 2000)
    document.querySelector('button').addEventListener('click', () => {
      // 清除定时器
      clearTimeout(time)
    })
  </script>

　　　　　　2、setInterval()：window.setInterval(回调函数，[间隔的毫秒数])，setInterval()方法重复调用一个函数，每隔这个时间就去调用一次回调函数。

　　　　　　　　清除 setInterval 定时器：window.clearInterval() 方法用于取消之前通过调用 setInterval 建立的定时器。

  <button>按钮</button>
  <script>
    let setinterval = setInterval(() => {
      console.log('会重复执行的定时器');
    }, 1000)
    document.querySelector('button').addEventListener('click', () => {
      clearInterval(setinterval)
    })
  </script>

 　　this 指向

　　　　　　1、一般情况下 this 最终指向的是那个调用它的对象。

　　　　　　2、全局作用域或普通函数中的 this 指向全局对象 window，注意定时器里的 this 指向 window。

　　　　　　3、在方法中，谁调用这个方法谁就是 this。

　　　　　　4、在构造函数中，this 指向它的实例对象。

　　　　　　　　

 

 

 js 执行机制

　　同步和异步

　　　　同步：前一个任务执行完之后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的。

　　　　异步：在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时还可以处理其他事情。

　　　　同步任务：同步任务都在主线程上执行，形成一个执行栈。

　　　　异步任务：js 的异步是通过回调函数实现的。一般有三种类型，1、普通事件，如 click 等。2、资源加载，如 load 等。3、定时器，包括 setInterval 和 setTimeout 等。异步任务相关的回调函数添加到任务队列(也称为消息队列)中。

　　执行机制

　　　　1、先执行执行栈中的同步任务。

　　　　2、异步任务放入任务队列中。

　　　　3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

　　　　由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环。

location 对象

　　什么是 location 对象

　　　　window 对象给我们提供了一个 location 属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location对象。

　　URL

　　　　统一资源定位符。是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该如何处理它。

　　常见的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）www.itemma.com
location.port	返回端口号 如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 # 后面内容，常见于链接、锚点

　　常见的方法

location对象方法	返回值
location.assign()	跟 href 一样，可以跳转页面(也称为重定向页面)
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新或 F5 如果参数为 true 强制刷新 ctrl + F5

  <button>有历史记录</button>
  <button>无历史记录</button>
  <button>刷新</button>
  <script>
    let btns = document.querySelectorAll('button')
    btns[0].addEventListener('click', () => {
      // 有历史记录所以能后退
      location.assign('http://www.baidu.com')
    })
    btns[1].onclick = () => {
      // 没有历史记录所以不能后退
      location.replace('http://www.baidu.com')
    }
    btns[2].onclick = () => {
      // 刷新页面 如果参数为true表示强制刷新
      location.reload()
    }
  </script>