JavaScript setTimeout은 클로저 기능을 사용하여 정기적으로 값을 인쇄합니다_javascript 기술

이번에는 setTimeout을 사용하여 시간에 따라 순차적으로 값을 출력하는 예제를 구현했습니다. 사실 초창기에도 자주 했던 실수이거나 이런 능력을 갖추기 위해서였던 것 같습니다. JS의 힘을 이해하지 못했습니다. setInterval을 사용하여 구현하면 이번에는 매우 간단합니다. 가장 간단한 생각부터 시작하겠습니다. 그러면 다음 코드가 작성됩니다.

for(var i = 0; i < 5; i++)
{ 
setTimeout(console.log(i),i*1000); 
} 

이 코드는 각 i의 값을 0, 1, 2, 3, 4 순서로 인쇄하지만 실행 시간은 역할을 하지 않습니다. 왜냐하면 console.log()가 의 실행 호출이기 때문입니다. method , 이 메소드를 호출한 후 즉시 실행됩니다! 따라서 예상한 목적을 달성하지 못합니다.

그럼 다음 코드를 계속 살펴보겠습니다

for(var i = 0; i< 5; i++ ){ setTimeout(function(){ console.log(i); },i*1000); } 

여기에서는 인쇄된 console.log가 포함된 익명 함수를 사용하여 i를 인쇄하므로 첫 번째 setTimeout이 실행되기 전에 for 루프가 실행되고 최종 i = 5가 됩니다. 사실, 두 가지 해결책이 있습니다. 먼저 첫 번째를 살펴보겠습니다.

var j = 0; function abc(){ console.log("j = "+j); j++; }  
for(var i = 0; i < 10; i++ ){ 
setTimeout(abc,i*1000) } 

여기에는 값을 저장하는 전역 변수가 하나 더 있습니다. abc 함수가 실행될 때마다 j가 한 번 추가되므로 setTimeout이 실행될 때 abc 함수가 호출되므로 기대한 효과가 달성됩니다. j는 전역 변수이므로 값이 쉽게 변경되거나 이름이 충돌하는 등의 문제가 발생합니다. 두 번째 방법을 구현하려면 클로저 함수를 생성할 때마다 다시 클로저 함수를 도입해야 합니다. 그래서 이런 생각을 이용하여 다음과 같이 코드를 작성합니다.

for(var i = 0; i < 10; i++ )
{ 
(function(x){ setTimeout(function()
{ 
console.log(x) },x*1000) })(i) 
}  

for 루프가 실행될 때마다 생성된 다양한 클로저 함수에 i 값을 전달하므로 각 클로저 함수에 저장되는 i 값이 달라집니다. 따라서 원하는 결과를 얻을 수 있습니다.

ps: 클로저를 사용하여 setTimeout을 간단히 캡슐화하세요

js 스크립트를 작성할 때 setTimeout 호출과 같은 일부 철자 함수가 자주 사용됩니다

var msgalert="test"; 
 function TestAlert(msg) 
   { 
    alert(msg) 
   } 
    
   $(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert("+msgalert+")",1000); 
    }); 
}) 

오랜 시간 동안 검색했는데 왜 대화 상자가 팝업되지 않나요? 오랫동안 확인해보니 작은따옴표

한 쌍이 빠진 것을 발견했습니다.

$(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert('"+msgalert+"')",1000); 
    }); 
}) 

이러한 작성 방식은 오류가 발생하기 쉬우며, 클로저를 사용하면 다음과 같이 다시 작성하면 됩니다.

 var msgalert="test"; 
  function dalayAlert(msg ,time){  
  setTimeout( 
  TestAlert(msg), 
  time 
  ); 
  }  
 function TestAlert(msg) 
 { 
  alert(msg) 
 } 
$(document).ready(function () {   
$("#btnCancel").click(function (e) { 
   dalayAlert(msgalert,1000) 
 }); 

클로저를 사용하기 때문에 훨씬 간단하고 오류 확인도 쉽습니다