이번에는 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) }
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) });