VueJS에서 setTimeout() 타이머 함수를 만드는 방법을 알아봅니다. 어떻게하면 될까요?# VueJS setTimeout() 함수 만드는 방법물론 VueJS에서도 setTimeout()을 사용할 수 있습니다. 자바스크립트이므로 당연히 동작합니다. 하지만 VueJS의 모델에 접근할 수 없으므로 내장함수가 있다면 이를 사용하거나 아니면 다른 방법을 사용해야하죠.하지만!!!타이머 함수를 위한 내장함수가 별도로 존재하지 않으며 setTimeout()을 사용하여 해당 vue의 scope에 접근할 수 있는 방법이 존재합니다. 이 경우 두 가지 방법이 있는데요~ 아래에서 알아보세요.! Arrow 함수를 사용하는 방법ES6에 사용되는 Arrow 함수를 사용하면 VueJS의 scope 영역을 his를 사용하여 접근 가능합니다. 아래와 같이 사용하면 됩니다.setTimeout(() => { // Code here}, 1000);! bind(this)를 사용하여 this 객체를 바인딩하기vu
2019-01-17 02:05:02react native에서 타이머 함수를 만드는 방법을 알아봅니다.먼저 react native에서의 타이머 함수는 다른 메소드를 사용하지 않고 동일하게 자바스크립트를 사용합니다. 다만 react native에서는 EC 6로 콜백함수를 호출해야만 현재 scope를 this에 함께 바인딩하는 것이 가능합니다. 아래는 간단한 예제로 2초 후 메시지를 출력합니다.setTimeout(() => { alert('Hi');}, 2000); arrow 함수를 사용한 부분을 제외하면 기존의 자바스크립트와 동일하게 사용합니다.
2018-08-14 13:51:02자바스크립트에서 타이머 기능을 구현할 때 setTimeout()을 사용할 수 있습니다. setTimeout() 코드 작성시 내부의 콜백함수에 원하는 파라미터를 번달하는 방법에 대하여 알아봅니다.# 파라미터를 전달하는 이유는 ?파라미터를 전달하는 이유는 무엇일까요? 사실 setTimeout() 내부 함수에서 동일 선상의 변수를 참조할 수 있으므로 파라미터가 반드시 필요한 것은 아닙니다. 다만 타이머 내부 함수는 익명함수로 클로저(closure)setTimeout(function(name) { }, 3000, param1);구버전의 IE에서 동작안함 IE10이상부터 가능
2017-09-05 05:47:31자바스크립트의 객체 내에서 setTimeout() 구문을 사용할 경우 자기 자신인 객체를 호출하는 방법을 알아봅니다.먼저 아래처럼 객체 하나를 만들고 간단한 setTimeout()을 실행하는 함수가 내부에 있다고 생각해봅니다.var obj = { site: 'webisfree', getSite: function() { alert(this.site); }};위 객체는 사이트 이름과 사이트 이름을 출력하는 프로퍼티, 메소드를 각각 가지고 있습니다. 실행하면 사이트네임 webisfree가 잘 출력됩니다. 여기서 만약 메소드 getSite()가 3초 후 출력될 수 있도록 setTimeout()을 추가하면 어떻게 될까요?! 타이머 3초 후 출력되는 코드var obj = { site: 'webisfree', getSite: function() { setTimeout(function() { alert(this.site); }, 3000); }};위 코드는 se
2017-09-04 04:12:05자바스크립트에서 시간 지연 후 함수를 호출하기 위하여 setTimeout()을 사용한다. setTimeout()을 수행할 경우 원하는 시간만큼 지연한 뒤 콜백 함수를 호출할 수 있다. 이 경우 각각의 지연 시간이 동일하게 나타날 수도 있는데 뒤에는 이런 문제를 해결하기 위하여 알아보도록 한다.간단하게 1부터 10까지 더하는 예제를 만들어보자. 만약 1부터 10까지 더하는 함수를 만든다면 매우 쉽게 55를 얻을 수 있다. 하지만 우리는 아래와 같이 사용자에게 더하는 과정을 보여주려 한다.문제: 1초에 1씩 더하고 추가한 값을 보여주기그럼 문제를 해결해보자. 먼저 시간 지연이 없다면 코드가 어떻게 될까?# 1부터 10까지 합 구하기아래의 코드를 보자. 아래의 코드는 1부터 10까지의 합을 구하는 연산이다.var startNum = 1;var lastNum = 10;var sum = 0;for (startNum; startNum < lastNum+1; startNum++) { sum =
2017-06-15 21:40:37jQuery를 사용하여 비동기 통신 AJAX를 사용할때 대기시간을 설정할 수 있습니다. 이 값을 설정하면 대기하는 시간이 지날 경우 에러 등의 상태로 전환하게 됩니다.알려진바로는 timeout의 기본값은 브라우저 및 환경에 따라 각기 다르다고 합니다.대기시간을 설정하는 이유는 통신 지연등의 이유도 있지만 Long polling이라는 방식에서도 사용됩니다. 이는 연결 대기시간을 늦추어 완벽하지는 않지만 게속 통신이 가능하도록 유지하는 방법 중 하나입니다.그럼 아래는 jQuery에서 AJAX의 대기시간을 설정하는 예제입니다. 이때 timeout 값을 설정하도록 합니다.# 제이쿼리 AJAX의 대기시간 설정 예제보기 $.ajax({ url: '/blog/', type: 'get', dataType: 'json', timeout: 3000});위 예제는 timeout을 3초로 설정하였습니다.
2017-04-06 20:20:39일정시간 뒤에 콜백함수를 실행하는 방법에는 setTimeout() 함수가 사용됩니다. 이런 지연 함수는 제이쿼리에도 동일하지는 않으나 일정시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 제이쿼리의 시간지연 함수는 바로 delay() 함수입니다.선택요소.delay(delay time, queuename)delay() 함수는 일정시간이 경과한 뒤에 함수 뒤의 코드를 실행하도록 강제적인 지연시간을 생성합니다. 단 이 경우 큐를 가진 애니메이션에만 적용된다는 점을 꼭 기억해야합니다. 즉, 그 외의 non-queue 코드에는 적용이 되지 않습니다. 이 경우 당연히 settimeout()을 사용하시면 됩니다.예를들어 특정요소의 슬라이드 애니메이션을 구현할 경우 만약 이를 3초 뒤에 적용시킨다고 한다면 순수 자바스크립트를 사용한다면 setTimeout()을 사용해야 할 것입니다. 제이쿼리를 사용한 경우 아래와 같습니다.제이쿼리의delay() 함수 예제 코드를 아래에서 확인하세요. # de
2015-09-14 17:43:16자바스크립트의 클로저(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); }}함수를 실행하면 0, 1, 2가 나타날까요? 실제로 구현해보면 원했던 결과가 나타나지 않습니다... 출력되는 결과는 아래와 같이 각각 2, 2, 2이 출력됩니다.222 왜 0, 1, 2의 값
2015-07-07 15:38:22자바스크립트를 사용하면서 많이 사용되는 함수 중 하나로 setInterval()이 있다. 많이 사용된다는 것은 그만큼 중요하기 때문일 것이다. 아래는 setInterval()을 무엇인지 알아보고 어떻게 구현하는지 예제를 통해 알아보려한다.# setInterval 사용방법아래는 setInterval()을 사용하는 방법과 이를 효과적으로 사용하기 위한 팁과 다양한 정보를 알아보고자 한다. 먼저 setInterval()을 사용하는 기본적인 방법은 아래와 같다. setInterval(function() { ... }, 지연시간);문법은 그리 어렵지 않다. 그럼 타이머 함수는 언제 자주 사용할까? 아래에서 알아보자.! setInterval()을 사용하는 경우 이 함수를 사용해야 하는 경우는 매우 많이 있다. 그 중에서 몇 가지 알아보면 아래와 같은 케이스가 존재있다. i. 갤러리 형식의 뷰를 만들어 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우(Carousel Gallery)ii.
2014-10-23 09:00:28자바스크립트 함수중에서 자주 사용되는 타이머 함수가 있습니다. 바로 setTimeout()이죠! 아래는 어떻게 동작하고 사용하는지 자세히 알아보고자 합니다.# setTimeout()이란?일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용합니다. 앞에서도 말했지만 자바스크립트 함수 중에서도 특히 자주 사용되는 함수 중 하나입니다. 먼저 간단한 문법, 사용방법은 아래와 같습니다.setTimeout(function() { // Code here }, delay) 위 함수는 보통 두 개의 인자를 설정하여 사용합니다.i. 호출될 콜백함수 ii. 지연시간(delay time)setTimeout() 함수의 내부에 위치한 코드 function() { // Code here }는 콜백함수로 지연시간 뒤에 실행될 코드를 설정합니다. 지연시간은 밀리세컨드 단위로 설정해야하며 예를들어 지연시간 1000은 1초, 10000은 10초를 의
2014-04-08 10:42:04
