【js】异步方法同步化

背景

最近刷知乎的时候使用到了返回顶部的功能，跟我以前写的直接将滚动条滑动到顶部不太一样。知乎的 滚动条是由慢到快加速度慢慢滚动上去的。于是我见猎心喜，琢磨着自己也实现一个这样的功能。毕竟以前是直接控制滚动条定位到顶部这样跳转太突兀了。

实现思路

于是我开始了对知乎返回顶部功能进行反复尝试，总结出了思路：

1. 知乎的返回顶部是 有停顿时间的，有一个肉眼可见的停顿，并不是直接定位
2. 返回的速度是由慢到快 逐步加速 的

实现过程

1. 实现一个休眠方法，每隔一定时间再让滚动条进行滚动

function sleep(time,loop){
    /// <summary>休眠方法</summary>
    /// <param name="time" type="int">休眠时间</param>
    /// <param name="loop" type="int">是否循环，1循环0不循环</param>
    if(!time)time=1000;
    if(!loop)loop=1;
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve()
        },time)
    })
}

2.异步方法同步调用，等待时间完成后调整滚动条

//返回到顶部
async function goTop(){
    let innerHeight=window.scrollY;
    let changeHeight=200;
    for (let index = 0; innerHeight>200;index++) {
        await sleep(50)
        innerHeight-=changeHeight;
        changeHeight+=changeHeight;//让滚动条加速
        window.scrollTo(0,innerHeight);
    }
    window.scrollTo(0,0);
}

总结

这次用到了es6的promise和es7的async，await。技术上实现起来不难，只是以前做返回顶部的时候总是一句window.scrollTo(0,0)了事。做技术的还是细致一些的好