Question

您好，很抱歉，很长的帖子，

我有单击HTML元素时会调用此函数。

function workItemClicked(imageID, clickedElement, toStart) {

    toggleShowcase(clickedElement, !toStart, imageID);
}

function toggleShowcase(clickedElement, enable, image_id) {

if (enable) {

    switch (image_id) {

        case 1:

            displayNextImage(clickedElement, br_images, true);
            br_interval = setInterval(function () {
                displayNextImage(clickedElement, br_images, false);
            }, 4500);
            break;
    }

} else {

    switch (image_id) {

        case 1:
            clearInterval(br_interval);
            break;
    }
    $(clickedElement).parent().removeClass("band-work-bg");
}


}

当我单击另一个元素时，它会使用相同的方法，带有全新的参数，并且也将其存储在另一个变量中，以稍后停止它。但是，如果有两个“ displayNextImage”函数正在运行，则会发生错误。

这是我的displayNextImage函数：

async function displayNextImage(clickedElement, imgArray, firstTime) {

//Hide background
clickedElement[0].classList.remove("work-showcase-show");
clickedElement[0].classList.add("work-showcase-hide");
if (!firstTime) {
    await sleep(500);
}

x = (x === imgArray.length - 1) ? 0 : x + 1;
//document.getElementById("img").src = images[x];
clickedElement[0].style.backgroundImage = "linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(" + imgArray[x] + ")";

//Show background
clickedElement[0].classList.remove("work-showcase-hide");
clickedElement[0].classList.add("work-showcase-show");


if (firstTime) {
    await sleep(1000);
    $(clickedElement).parent().addClass("band-work-bg");
}

}

这是一个异步函数，用于遍历该HTML元素的图像，但是由于某些原因，如果正在运行2个或多个displayNextImage函数，则该卡将循环遍历同一图像，并且如果该数组没有足够的图像作为前一个一，它崩溃了。

我认为这是由于范围问题引起的，我对javascript并不是很熟悉，任何帮助将不胜感激。

第二个setInterval函数调用与第一个冲突

0 个答案: