如何在js中停止间隔？答案

【问题标题】：How to stop interval in js?如何在js中停止间隔？
【发布时间】：2022-01-09 17:30:53
【问题描述】：

目前我正在尝试为图片创建幻灯片（单击箭头时，另一张图片滑入，所有图片都在 html 中排成一行）。我没有使用滚动方法。图像在移动，但似乎我无法停止间隔。我想问如何停止间隔？我错过了什么？

const icons = document.querySelectorAll(".icons i");
const imageDiv = document.querySelector(".imageDiv");

let positionRight = 0;

function addPositionRight () {
    positionRight += 1;
    imageDiv.style.right = `${positionRight}%`;
}

icons[1].onclick = () => {
    setInterval(addPositionRight, 10);
    if (positionRight === 100) {
        clearInterval(addPositionRight)
    }
}

【问题讨论】：

标签： javascript setinterval clearinterval

【解决方案1】：

setInterval 方法返回一个指向该区间的指针，然后您只需将其传递给 clearInteral

const interval = setInterval(() => {
    console.log('inside interval');
}, 500);

setTimeout(() => clearInterval(interval), 2000)

【讨论】：

【解决方案2】：

setInterval 返回一个标识符，允许您清除间隔

let myInterval;

function addPositionRight () {
    positionRight += 1;
    imageDiv.style.right = `${positionRight}%`;
    if (positionRight === 100) {
        clearInterval(myInterval);
    }
}

myInterval = setInterval(addPositionRight, 10);

【讨论】：

【解决方案3】：

你必须使用clearInterval方法如下，

const stopInterval = setInterval(addPositionRight, 10);

clearInterval(stopInterval) //<----- use it where you want to stop it.

【讨论】：