javascript - 有没有更好的方法来实现这个滚动库，以便在快速单击箭头多次时不会中断

Question

我创建了一个按预期工作的滚动画廊，但是当您反复快速按下箭头时，它就会崩溃。当你停止时它会恢复，但我希望它在快速按下时更流畅。

const options = {
    slideOptionsRight: {
        "duration": 1000, //Change how quickly the picture fades in milliseconds.
        "direction": "right"
    },
    slideOptionsLeft: {
        "duration": 1000,
        "direction": "left"
    },
    images: [ //Add image names to be added to the scroll here, wrapped in quotation marks.
        '#image1',
        '#image2',
        "#image3",
        "#image6"
    ],
    arrowImage: [ //Add arrow images here.
        "#image4", //Left arrow.
        "#image5" //Right arrow.
    ],
    "interval": 3, //Change time between pictures in seconds.
    "imageArray": 0,
    "timer": 0,
    "leftClick": false,
    "clicked": false
}

//Does not need to be touched or changed
$w.onReady(function () {
    for (let i = 1; i < options.images.length; i++) {
        $w(options.images[i]).hide()
    }

    const changePicture = () => {
        options.timer += 1;
        if (options.timer > options.interval || options.clicked) {
            if (options.leftClick) {
                if (options.imageArray === 0) {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsRight)
                    })
                    // $w(options.images[0]).hide("slide", options.slideOptionsRight);
                    $w(options.images[options.images.length - 1]).show("slide", options.slideOptionsLeft);
                    options.imageArray = options.images.length - 1;
                } else {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsRight)
                    })
                    // $w(options.images[options.imageArray]).hide("slide", options.slideOptionsRight);
                    $w(options.images[options.imageArray - 1]).show("slide", options.slideOptionsLeft);
                    options.imageArray -= 1;
                }
                options.leftClick = false;
            } else {
                if (options.imageArray === options.images.length - 1) {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsLeft)
                    })
                    // $w(options.images[options.imageArray]).hide("slide", options.slideOptionsLeft);
                    $w(options.images[0]).show("slide", options.slideOptionsRight);
                    options.imageArray = 0;
                } else {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsLeft)
                    })
                    // $w(options.images[options.imageArray]).hide("slide", options.slideOptionsLeft);
                    $w(options.images[options.imageArray + 1]).show("slide", options.slideOptionsRight);
                    options.imageArray += 1;
                }
            }
            options.timer = 0
        } else {
            return null;
        }
    }

    let startInterval = setInterval(changePicture, 1000)

    $w(options.arrowImage[1]).onClick(() => {
        options.clicked = true;
        changePicture();
        options.clicked = false;
    })

    $w(options.arrowImage[0]).onClick(() => {
        options.leftClick = true;
        options.clicked = true;
        changePicture();
        options.leftClick = false;
        options.clicked = false;
    })
});

有没有办法强制幻灯片效果提前完成，或者完全不同的实现会更好？

链接到测试https://joshsetterstrom.wixsite.com/mysite

标签： javascriptvelo