JavaScript에서 `setTimeout` 또는 `setInterval` 루프를 중지하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

JavaScript에서 `setTimeout` 또는 `setInterval` 루프를 중지하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-12-01 16:23:09

원래의

354명이 탐색했습니다.

How Can I Stop a `setTimeout` or `setInterval` Loop in JavaScript?

setTimeout 루프 중지

스프라이트를 사용하여 로딩 표시기를 구성할 때 일반적인 접근 방식은 배경 위치를 설정하는 함수를 사용하는 것입니다. 지표. 연속 루프를 생성하기 위해 코드는 setTimeout 콜백 내에서 함수를 재귀적으로 호출하는 방법을 사용합니다. 그러나 특정 작업이 완료되면 이 루프를 중지해야 하는 시점이 올 수 있습니다.

한 가지 해결 방법은 setTimeout에서 반환된 타이머 핸들을 검색하고 이를 ClearTimeout과 함께 사용하여 루프를 종료하는 것입니다. 다음은 이 접근 방식을 구현하는 코드의 수정된 버전입니다.

function setBgPosition() {
  var c = 0, timer = 0;
  var numbers = [0, -120, -240, -360, -480, -600, -720];

  function run() {
    Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
    if (c >= numbers.length) {
      c = 0;
    }
    timer = setTimeout(run, 200);
  }

  timer = setTimeout(run, 200);
  
  return stop;  // Function to stop the loop

  function stop() {
    if (timer) {
      clearTimeout(timer);
      timer = 0;
    }
  }
}

로그인 후 복사

이 코드를 사용하려면 setBgPosition()을 호출하고 반환된 함수(stop)를 변수에 저장할 수 있습니다.

var stop = setBgPosition();

로그인 후 복사

루프를 중지해야 할 경우 중지 함수를 호출하면 됩니다.

stop();

로그인 후 복사

또는, setTimeout 대신 setInterval을 활용할 수 있습니다. setInterval은 지정된 간격으로 지정된 기능을 자동으로 반복합니다. 다음은 setInterval을 사용하는 예입니다.

function setBgPosition() {
  var c = 0;
  var numbers = [0, -120, -240, -360, -480, -600, -720];

  function run() {
    Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
    if (c >= numbers.length) {
      c = 0;
    }
  }
  
  return setInterval(run, 200);
}

로그인 후 복사

이 시나리오에서 아래 코드는 루프를 중지합니다.

var timer = setBgPosition();
clearInterval(timer);

로그인 후 복사

위 내용은 JavaScript에서 `setTimeout` 또는 `setInterval` 루프를 중지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!