Answer 1

演示地址⭐
github 源码

原理

本例 固定为4张图的轮播图,主要为便于阐述原理.

1. 首先页面布局,重点实现如上图所示的滚动内容(board)结构
   • 4fake的图片4的复制,1fake的图片1的复制,
2. 通过设置上述滚动结构(board)的css left和transition 实现滚动效果
3. 实现无限滚动
   • 当页面滚动到1fake 时,在滚动完成后,将left值设置到1的位置(此处没有动画,用户无法察觉);
   • 同理,当页面滚动到4fake 时,在滚动完成后,将left值设置到4的位置(此处也没有动画);

3 实现无缝轮播

当到达4fake的位置,默默切换到4,到达1fake的位置,默默切换到1

(function () {
    let prev = document.getElementsByClassName("carousel-prev")[0];
    let next = document.getElementsByClassName("carousel-next")[0];
    let board = document.getElementsByClassName("carousel-board")[0];
    let panels = Array.from(document.getElementsByClassName('carousel-board-item'));
    board.style.left = "-400px"; //设置初始的left值
    let index = 1; //设置初始的index值
    prev.addEventListener("click", function () {
        index++
        console.log(index);
        animate(-400);
        //关键点 如果当前在 1fake 的位置
        if (index === panels.length - 1) {
            setTimeout(() => {
                //去掉动画
                board.style.transition = "0s";
                let distance = 4 * 400
                //默默的左移board至 1
                board.style.left = parseInt(board.style.left) + distance + "px"
            }, 600)
            index = 1;
        }

    })
    next.addEventListener("click", () => {
        index--
        console.log(index);
        animate(400);
        //关键点 如果当前在 4fake 的位置
        if (index === 0) {
            setTimeout(() => {
                // 去掉动画
                board.style.transition = "0s";
                let distance = -4 * 400
                //默默的右移board 至 4
                board.style.left = parseInt(board.style.left) + distance + "px"
            }, 600)
            index = 4;
        }
    })

    function animate(width = 400) {
        board.style.transition = "0.5s";
        board.style.left || (board.style.left = 0)
        board.style.left = parseInt(board.style.left) + width + "px";
    }
})()

Answer 2

(async () => {
  const listPromise = getList();
  const anotherListPromise = getAnotherList();
  await listPromise;
  await anotherListPromise;
})();

这个写法有点不理解，就是 getList 和 getAnotherList。返回的是promise。如果后面有代码要执行，就要等这两个请求回来了再执行？

@chenhuiYj 我觉得是的，这样的写法只是为了让两个异步函数并行执行，而不是一先一后执行，下面的await是用来获取上面异步函数的返回数据。但是程序还是要等到上面两个函数都执行完毕，才会执行await下面的其他代码的。