补1.使用promise+asyncawait实现异步循环打印2.执行顺序3.hashhistory模式

1.使用promise + async await实现异步循环打印

var sleep = function (time, i) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(i);
        }, time);
      })
    };


    var start = async function () {
      for (let i = 0; i < 6; i++) {
        let result = await sleep(1000, i);
        console.log(result);
      }
    };

    start();

<script>
     const repeatFunc = repeat(console.log, 4, 3000);
     repeatFunc('hellworld');
     
    function sleep1(wait) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, wait);
      });
    }
    function repeat(func, times, wait) {
      return async function () {
        for (var i = 0; i < times; i++) {
          await sleep1(wait);
          func.apply(this, arguments);
        }
      }
    }
  </script>
  
 4次 hellworld   1.html:25

2.执行顺序


Promise.resolve()相当于 new Promise((resolve,reject)=>{
    resolve();
})
Promise.resolve().then(()=>{
  console.log('Promise1')
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
});
setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')
  })
},0);

最后输出结果是 Promise1，setTimeout1，Promise2，setTimeout2

3.hash history 模式

hash 路由模式的实现主要是基于下面几个特性： URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送； hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

hash 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hash</title>
</head>
<body>
  <a class="spa">spa1.html</a>
  <a class="spa">spa2.html</a>

  <script>
    document.querySelectorAll('.spa').forEach((item,index)=>{
      item.addEventListener('click',(e)=>{
        e.preventDefault();
        var link=item.textContent;
        window.location.hash=`${index+1}`
      });

      window.addEventListener('hashchange',(e)=>{
        console.log({hash:location.hash});
        
      })
    })

  </script>
</body>
</html>

（2）history 模式的实现原理 HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示： window.history.pushState(null, null, path); window.history.replaceState(null, null, path); history 路由模式的实现主要基于存在下面几个特性： pushState 和 repalceState 两个 API 来操作实现 URL 的变化；我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）； history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

history 模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>History</title>
</head>
<body>
  <a  class="spa">spa1.html</a>
  <a  class="spa">spa2.html</a>
  <br>
  <button onclick="goBack()">back</button>
  <button onclick="goForward()">forward</button>

  <script>
    document.querySelectorAll('.spa').forEach((item,index)=>{
      item.addEventListener('click',(e)=>{
        e.preventDefault();
        var link=item.textContent;
        window.history.pushState({name:`spa${index+1}`},link,link);
        
        console.log(link,'pushState');
        
      },false)
    });

    window.addEventListener('popstate',(e)=>{
      console.log(e.state);
    });

   function goBack(){
     window.history.back()
   };

   function goForward(){
     window.history.forward();
   }
  </script>
</body>
</html>