JavaScript 학습 노트 정리_setTimeout의 사용

setTimeou의t적용

var ids = [];
function foo1(i) {
  
  console.log('i = '+i);
  ids[0] = setTimeout((function () {
    foo1(i);
  }),1000);
}
function foo2(j) {
  
  console.log('j = '+j);
  ids[1] = setTimeout((function () {
    foo2(j);
  }),1000);
}
foo1(2);
foo2(3);
clearTimeout(ids[0]);
1]

setTimeout(f, n)이 호출될 때, 그것은 ID를 반환하고 약 n 밀리초 후 f 함수를 호출할 계획입니다. f 함수는 한 번만 실행됩니다(재귀적으로 실행할 수 있어서 매 n 밀리초마다 실행할 수 있습니다). JavaScript 엔진의 타이머 전략과 본질적인 단일 스레드 실행 방식을 기반으로, 다른 코드의 실행이 이 스레드를 차단할 수 있습니다. 따라서 함수가 setTimeout에서 지정한 시간에 호출될 수 없습니다.回调 함수 내에서 setTimeout 함수를 사용하여 차단을 방지할 수 있습니다!

JavaScript는 비동기적입니다. setTimeout은回调 함수를 한 번만 실행하지만, setInterval은 X 밀리초마다 함수를 실행합니다. 그러나 이 함수를 사용하는 것을 권장하지 않습니다.回调 함수의 실행이 차단되면 setInterval은 더 많은回调 명령을 발행합니다. 매우 작은 시간 간격에서는回调 함수가 쌓이게 됩니다;

setTimeout 과 setInterval은 첫 번째 매개변수가 문자열인 경우를 받아들이지만, 이 특성은 절대 사용하지 말아야 합니다. 이는 내부에서 숨겨진 eval을 사용하기 때문입니다. eval이 이 경우 직접 호출되지 않기 때문에 setTimeout에 전달된 문자열은 전역 범위에서 실행됩니다. 따라서回调 함수에 매개변수를 전달하기 위해 문자열 형식으로 호출定时器 함수를 사용하는 것을 권장하지 않습니다;回调 함수에 매개변수를 전달할 때는 익명 함수를 생성하여 실제回调 함수를 실행할 수 있습니다;

onscolll, onresize 등은 매우 성능을 소모합니다. 따라서 AJAX 요청을 사용하면, 창 크기를 변경할 때마다 AJAX 요청이 여러 번 발생합니다. 따라서 함수 테스트를 시도해 보겠습니다. 물론 setTimeout() 타이머를 추가하여도 됩니다.

첫 번째 포장 방법

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
window.onresize = function () {
  delayFun(oCount)
});
function delayFun(method, thisArg) {
  clearTimeout(method.props);
  method.props = setTimeout(function () {
    method.call(thisArg)
  }, 200)
}

두 번째 포장 방법

클로저를 생성하여, 클로저를 통해 사적인 스코프를 형성하여 타이머 timer를 저장합니다. timer는 매개변수로 전달됩니다.

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
var funs= delayFun(oCount,100);
window.onresize = function () {
  funs()
});
function delayFun(func, wait) {
  var timer = null;
  return function () {
    var context = this;
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(context, args);
    }, wait)
  });
}

두 번째 메서드를 최적화하면 성능이 좋아집니다.

이 함수는 지속적으로 호출되지 않으면 실행되지 않습니다. 함수는 N 밀리초가 지나고 다시 호출되면 실행됩니다. 'immediate' 매개변수를 전달하면 즉시 실행队列에 추가되어 지연되지 않습니다.

function delayFun (func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    });
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  });
});
// 사용법
var myEfficientFn = delayFun(function() {
  // 모든 무거운 작업
}, 250);
window.addEventListener('resize', myEfficientFn);

함수는回调 함수가 지정된 시간 내에 한 번 이상 실행되지 않도록 합니다. 자주 발생하는 이벤트에 대해回调 함수를 할당하는 경우, 이 함수가 매우 중요합니다.

setTimeout가 이렇게 강력하다면, 우리는 프로젝트에서 많이 사용할 수 있을까요?

저는 추천하지 않습니다. 우리의 비즈니스에서는, setTimeout를 비즈니스 로직에서 사용하는 것을 거의 금지합니다. 왜냐하면 많은 사용 방법이 문제를 해결하기 어렵기 때문입니다. setTimeout는 해킹 방법으로 사용됩니다.

예를 들어, 인스턴스가 초기화되지 않은 상태에서 이 인스턴스를 사용하는 경우, 인스턴스를 사용할 때 setTimeout를 추가하여 인스턴스가 먼저 초기화되도록 하는 것이 잘못된 해결 방법입니다.

왜 오류가 발생할까요? 여기서는 해킹 방법을 사용하는 것입니다.

첫 번째는 문제를 발생시키며, 모듈의 라이프 사이클을 망가뜨립니다.

두 번째는 문제가 발생할 때, setTimeout는 실제로 디버깅이 어렵습니다.

적절한 사용 방법은, 라이프 사이클을 확인하는 것입니다(《소프트웨어의 라이프 사이클에 대해》를 참조하세요)， 인스턴스를 사용하기 전에 초기화를 수행하는 것을 추천합니다.

이제 여러분께 소개해드린 JavaScript 학습 노트 정리_setTimeout의 모든 내용이 끝났습니다. 여러분의 도움과 지지를 많이 받았으면 합니다. 지적한 튜토리얼에 대한 지지를 많이 해 주세요~

기본 튜토리얼