자바스크립트 함수중에서 자주 사용되는 타이머 함수가 있습니다. 바로 setTimeout()이죠! 아래는 어떻게 동작하고 사용하는지 자세히 알아보고자 합니다.# setTimeout()이란?일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용합니다. 앞에서도 말했지만 자바스크립트 함수 중에서도 특히 자주 사용되는 함수 중 하나입니다. 먼저 간단한 문법, 사용방법은 아래와 같습니다.setTimeout(function() { // Code here }, delay); 위 함수는 보통 두 개의 인자를 설정하여 사용합니다.i. 호출될 콜백함수 ii. 지연시간(delay time)setTimeout() 함수의 내부에 위치한 코드 function() {
Last Modified : 2019-08-05 18:00:24
자바스크립트를 사용하면서 많이 사용되는 함수 중 하나로 setInterval()이 있다. 많이 사용된다는 것은 그만큼 중요하기 때문일 것이다. 아래는 setInterval()을 무엇인지 알아보고 어떻게 구현하는지 예제를 통해 알아보려한다.# setInterval 사용방법아래는 setInterval()을 사용하는 방법과 이를 효과적으로 사용하기 위한 팁과 다양한 정보를 알아보고자 한다. 먼저 setInterval()을 사용하는 기본적인 방법은 아래와 같다. setInterval(function() { ... }, 지연시간);문법은 그리 어렵지 않다. 그럼 타이머 함수는 언제 자주 사용할까? 아래에서 알아보자.! setInterval()을 사용하는 경우 이 함수를 사용해야 하는 경우는 매우 많이 있다. 그
Last Modified : 2019-08-05 22:55:08
일정시간 뒤에 콜백함수를 실행하는 방법에는 setTimeout() 함수가 사용됩니다. 이런 지연 함수는 제이쿼리에도 동일하지는 않으나 일정시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 제이쿼리의 시간지연 함수는 바로 delay() 함수입니다.선택요소.delay(delay time, queuename)delay() 함수는 일정시간이 경과한 뒤에 함수 뒤의 코드를 실행하도록 강제적인 지연시간을 생성합니다. 단 이 경우 큐를 가진 애니메이션에만 적용된다는 점을 꼭 기억해야합니다. 즉, 그 외의 non-queue 코드에는 적용이 되지 않습니다. 이 경우 당연히 settimeout()을 사용하시면 됩니다.예를들어 특정요소의 슬라이드 애니메이션을 구현할 경우 만약 이를 3초 뒤에 적용시킨다고 한다면 순수 자바
Last Modified : 2017-12-17 10:02:14jQuery를 사용하여 비동기 통신 AJAX를 사용할때 대기시간을 설정할 수 있습니다. 이 값을 설정하면 대기하는 시간이 지날 경우 에러 등의 상태로 전환하게 됩니다.알려진바로는 timeout의 기본값은 브라우저 및 환경에 따라 각기 다르다고 합니다.대기시간을 설정하는 이유는 통신 지연등의 이유도 있지만 Long polling이라는 방식에서도 사용됩니다. 이는 연결 대기시간을 늦추어 완벽하지는 않지만 게속 통신이 가능하도록 유지하는 방법 중 하나입니다.그럼 아래는 jQuery에서 AJAX의 대기시간을 설정하는 예제입니다. 이때 timeout 값을 설정하도록 합니다.# 제이쿼리 AJAX의 대기시간 설정 예제보기 $.ajax({ url: '/blog/', type: 'get', dataType: 'json
Last Modified : 2017-08-28 12:33:58
자바스크립트의 클로저(Closure)를 이해하고 이를 활용해 setTimeout() 함수에서 일어날 수 있는 일을 예측, 발생가능한 이슈를 수정하는 방법에 대하여 알아보려합니다.# 자바스크립트의 클로저(Closure) 알아보기클로저를 이해하기 위해서 하나의 예제를 만들어보려고합니다. 그 중에서 setTimeout()을 사용한 예제가 많이 사용되죠 ~ 그럼 아래코드를 통해 알아보겠습니다. 아래는 test 함수를 실행할 경우 1, 2, 3초에 0, 1, 2 문자를 콘솔창에 각각 출력하게 하는 코드입니다.test = function () { for (i=0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000*i); }}함수를 실행
Last Modified : 2019-08-07 20:39:07
VueJS에서 setTimeout() 타이머 함수를 만드는 방법을 알아봅니다. 어떻게하면 될까요?# VueJS setTimeout() 함수 만드는 방법물론 VueJS에서도 setTimeout()을 사용할 수 있습니다. 자바스크립트이므로 당연히 동작합니다. 하지만 VueJS의 모델에 접근할 수 없으므로 내장함수가 있다면 이를 사용하거나 아니면 다른 방법을 사용해야하죠.하지만!!!타이머 함수를 위한 내장함수가 별도로 존재하지 않으며 setTimeout()을 사용하여 해당 vue의 scope에 접근할 수 있는 방법이 존재합니다. 이 경우 두 가지 방법이 있는데요~ 아래에서 알아보세요.! Arrow 함수를 사용하는 방법ES6에 사용되는 Arrow 함수를 사용하면 VueJS의 scope 영역을 his를 사용하여 접근
Last Modified : 2019-01-17 13:15:43react native에서 타이머 함수를 만드는 방법을 알아봅니다.먼저 react native에서의 타이머 함수는 다른 메소드를 사용하지 않고 동일하게 자바스크립트를 사용합니다. 다만 react native에서는 EC 6로 콜백함수를 호출해야만 현재 scope를 this에 함께 바인딩하는 것이 가능합니다. 아래는 간단한 예제로 2초 후 메시지를 출력합니다.setTimeout(() => { alert('Hi');}, 2000); arrow 함수를 사용한 부분을 제외하면 기존의 자바스크립트와 동일하게 사용합니다.
Last Modified : 2018-08-23 21:17:00자바스크립트를 사용하여 스톱워치, 타이머 기능의 함수를 만들어보려고 합니다. 아래에서 자세히 알아봅니다# 자바스크립트로 타이머, 스톱워치 함수 만들기먼저 이 기능은 언제 필요할까요? 간단하게 나열하면 다음과 같습니다.- 함수를 호출시 너무 빠른 간격으로는 호출하지 않을 경우(Debounce 설정)- 정해진 시간 뒤에 함수를 호출할 경우그럼 전체 소스 코드를 먼저 살펴봅니다.@ timer.jsstartTimer = function(_time) { let _oriTime = _time; return function _timerFunc(_nextTime) { if (_oriTime === _time || _nextTime === -1) { _time = _time - 100 < 0 ? 0 : _
Last Modified : 2019-10-17 13:30:31자바스크립트에서 시간 지연 후 함수를 호출하기 위하여 setTimeout()을 사용한다. setTimeout()을 수행할 경우 원하는 시간만큼 지연한 뒤 콜백 함수를 호출할 수 있다. 이 경우 각각의 지연 시간이 동일하게 나타날 수도 있는데 뒤에는 이런 문제를 해결하기 위하여 알아보도록 한다.간단하게 1부터 10까지 더하는 예제를 만들어보자. 만약 1부터 10까지 더하는 함수를 만든다면 매우 쉽게 55를 얻을 수 있다. 하지만 우리는 아래와 같이 사용자에게 더하는 과정을 보여주려 한다.문제: 1초에 1씩 더하고 추가한 값을 보여주기그럼 문제를 해결해보자. 먼저 시간 지연이 없다면 코드가 어떻게 될까?# 1부터 10까지 합 구하기아래의 코드를 보자. 아래의 코드는 1부터 10까지의 합을 구하는 연산이다.var
Last Modified : 2017-06-15 01:41:20자바스크립트에서 타이머 기능을 구현할 때 setTimeout()을 사용할 수 있습니다. setTimeout() 코드 작성시 내부의 콜백함수에 원하는 파라미터를 번달하는 방법에 대하여 알아봅니다.# 파라미터를 전달하는 이유는 ?파라미터를 전달하는 이유는 무엇일까요? 사실 setTimeout() 내부 함수에서 동일 선상의 변수를 참조할 수 있으므로 파라미터가 반드시 필요한 것은 아닙니다. 다만 타이머 내부 함수는 익명함수로 클로저(closure)setTimeout(function(name) { }, 3000, param1);구버전의 IE에서 동작안함 IE10이상부터 가능
Last Modified : 2017-09-08 10:33:33자바스크립트의 객체 내에서 setTimeout() 구문을 사용할 경우 자기 자신인 객체를 호출하는 방법을 알아봅니다.먼저 아래처럼 객체 하나를 만들고 간단한 setTimeout()을 실행하는 함수가 내부에 있다고 생각해봅니다.var obj = { site: 'webisfree', getSite: function() { alert(this.site); }};위 객체는 사이트 이름과 사이트 이름을 출력하는 프로퍼티, 메소드를 각각 가지고 있습니다. 실행하면 사이트네임 webisfree가 잘 출력됩니다. 여기서 만약 메소드 getSite()가 3초 후 출력될 수 있도록 setTimeout()을 추가하면 어떻게 될까요?! 타이머 3초 후 출력되는 코드var obj = { site: 'webisfree'
Last Modified : 2017-09-26 00:27:26
Putty를 사용하여 접속시 아무런 행동 없이 일정 시간이 지나면 자동으로 접속이 끊기게 됩니다. 이 경우 어떻게 하면 접속시간을 늘리거나 계속해서 세션을 유지할 수 있는지 알아봅니다.# Putty 연결 Connection 시간 늘리는 방법일단 연결 시간을 늘리는 방법은 두 가지가 존재합니다. 첫째는 서버의 내부 환경 설정에서 connection timeout에 대한 설정을 하는 방법입니다. 그리고 아래 방법이 오늘 알아볼 방법입니다.Putty에서 계속 패킷을 전송해 연결 유지하기이 방법은 Putty앱에서 설정하는 방법으로 원하는 시간을 설정하면 자동으로 계속해서 패킷을 전송해 사용자가 특정 행동을 하고 있음을 알리는 것과 같이 동작해 세션을 유지할 수 있게됩니다. 즉 중간에 접속이 끊기지 않도록 도와줍니다
Last Modified : 2020-07-08 17:58:46