时间戳

首页 > 解决方案 > 如何使用 clearInterval 停止我的功能？

javascript - 如何使用 clearInterval 停止我的功能？

问题描述

我目前有一个使用 setInterval 对多个图像进行排序的函数，将不透明度从 0 更改为 1，但是一旦它循环遍历所有图像，我需要清除间隔。目前，一旦浏览了所有图像，该功能就会中断。

// startImageSequence 函数

startImageSequence() {
    let sequence_frames = document.querySelectorAll('.sequenceImage').length;
    let sequence_current_frame = 0;

    setInterval(function(){
        let seqimgs = document.querySelectorAll('.sequenceImage');
      seqimgs[sequence_current_frame].style.opacity = 0;

        sequence_current_frame++;
        if(sequence_current_frame > sequence_frames) {
        let sequence_current_frame = 0;
        clearInterval();
      }

        seqimgs[sequence_current_frame].style.opacity = 1;
    }, 50);
  }

// 图片

<img src="..." class="sequenceImage" />
<img src="..." class="sequenceImage" />
<img src="..." class="sequenceImage" />
<img src="..." class="sequenceImage" />
<img src="..." class="sequenceImage" />
...

标签： javascriptecmascript-6

解决方案

您可以使用 clearInterval 来停止使用此技术的功能：

function startImageSequence() {
    let sequence_frames = document.querySelectorAll('.sequenceImage').length;
    let sequence_current_frame = 0;

   var clear =  setInterval(function(){
        let seqimgs = document.querySelectorAll('.sequenceImage');
      seqimgs[sequence_current_frame].style.opacity = 0;

        sequence_current_frame++;

        if(sequence_current_frame > sequence_frames) {
            let sequence_current_frame = 0;
            clearInterval(this);
        }

        seqimgs[sequence_current_frame].style.opacity = 1;
    }, 50);
}

您只需要将 setInterval 函数存储在特定变量中，然后在 clearInterval 中使用此变量来定义要停止的间隔。
我希望你会发现它有帮助。

推荐阅读