Question

我目前有一个函数，可以使用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" />
...

Answer 1

您只需要间隔的句柄，然后使用其调用clearInterval。

尝试一下：

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

      sequence_current_frame++;
      if(sequence_current_frame >= sequence_frames) {
       sequence_current_frame = 0; // removed the let
       clearInterval(intervalHandle);
     }

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

}

Answer 2

您可以使用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中使用此变量来定义要停止的间隔。
希望对您有所帮助。

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

2 个答案: