No error , No gain

Question 1

나는 setInterval(fname, 10000); JavaScript에서 10초마다 함수를 호출합니다. 어떤 이벤트에서 호출을 중지할 수 있습니까?

사용자가 반복되는 데이터 새로 고침을 중지할 수 있기를 바랍니다.

Question 2

setInterval() clearInterval() 전달할 수 있는 간격 ID를 반환합니다.

 var refreshIntervalId = setInterval(fname, 10000); /* later */ clearInterval(refreshIntervalId);

setInterval() 및 clearInterval() 문서를 참조하십시오.

Question 3

setInterval 의 반환 값을 변수로 설정하면 clearInterval 을 사용하여 중지할 수 있습니다.

 var myTimer = setInterval(...); clearInterval(myTimer);

Question 4

새 변수를 설정하고 실행할 때마다 ++(하나를 셉니다)씩 증가시킨 다음 조건문을 사용하여 종료할 수 있습니다.

 var intervalId = null; var varCounter = 0; var varName = function(){ if(varCounter <= 10) { varCounter++; /* your code goes here */ } else { clearInterval(intervalId); } }; $(document).ready(function(){ intervalId = setInterval(varName, 10000); });

도움이 되길 바라며 옳습니다.

Question 5

위의 답변은 이미 setInterval이 핸들을 반환하는 방법과 이 핸들을 사용하여 Interval 타이머를 취소하는 방법을 설명했습니다.

몇 가지 아키텍처 고려 사항:

"범위가 없는" 변수를 사용하지 마십시오. 가장 안전한 방법은 DOM 객체의 속성을 사용하는 것입니다. 가장 쉬운 장소는 "문서"입니다. 리프레셔가 시작/중지 버튼으로 시작되면 버튼 자체를 사용할 수 있습니다.

 <a onclick="start(this);">Start</a> <script> function start(d){ if (d.interval){ clearInterval(d.interval); d.innerHTML='Start'; } else { d.interval=setInterval(function(){ //refresh here },10000); d.innerHTML='Stop'; } } </script>

함수는 버튼 클릭 핸들러 내부에 정의되어 있으므로 다시 정의할 필요가 없습니다. 버튼을 다시 클릭하면 타이머를 다시 시작할 수 있습니다.

Question 6

이미 답변을 받았습니다... 하지만 다른 간격으로 여러 작업을 지원하는 재사용 가능한 기능 타이머가 필요한 경우 내 TaskTimer (노드 및 브라우저용)를 사용할 수 있습니다.

 // Timer with 1000ms (1 second) base interval resolution. const timer = new TaskTimer(1000); // Add task(s) based on tick intervals. timer.add({ id: 'job1', // unique id of the task tickInterval: 5, // run every 5 ticks (5 x interval = 5000 ms) totalRuns: 10, // run 10 times only. (omit for unlimited times) callback(task) { // code to be executed on each run console.log(task.name + ' task has run ' + task.currentRuns + ' times.'); // stop the timer anytime you like if (someCondition()) timer.stop(); // or simply remove this task if you have others if (someCondition()) timer.remove(task.id); } }); // Start the timer timer.start();

귀하의 경우 사용자가 데이터 새로 고침을 방해하기 위해 클릭하면; 당신은 또한 호출 할 수 있습니다 timer.pause() 다음 timer.resume() 가 필요하면 다시 할 수 있습니다.

여기에서 자세한 내용을 참조하십시오.

Question 7

clearInterval() 메서드는 setInterval() 메서드로 설정된 타이머를 지우는 데 사용할 수 있습니다.

setInterval은 항상 ID 값을 반환합니다. 이 값은 타이머를 중지하기 위해 clearInterval()에 전달할 수 있습니다. 다음은 30부터 시작하여 0이 되면 중지되는 타이머의 예입니다.

 let time = 30; const timeValue = setInterval((interval) => { time = this.time - 1; if (time <= 0) { clearInterval(timeValue); } }, 1000);

Question 8

@cnu,

콘솔 브라우저(F12)를 보기 전에 코드 실행을 시도할 때 간격을 중지할 수 있습니다. :NS

소스 예를 확인하십시오.

 var trigger = setInterval(function() { if (document.getElementById('sandroalvares') != null) { document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>'); clearInterval(trigger); console.log('Success'); } else { console.log('Trigger!!'); } }, 1000);

 <div id="sandroalvares" style="background: gold; width:200px;">Author</div>

Question 9

setInterval(...)에서 반환된 값을 할당할 변수를 선언하고 할당된 변수를 clearInterval()에 전달합니다.

예

 var timer, intervalInSec = 2; timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func' function func(param){ console.log(param); }

// 위에서 선언한 타이머에 액세스할 수 있는 모든 곳에서 clearInterval을 호출합니다.

 $('.htmlelement').click( function(){ // any event you want clearInterval(timer);// Stops or does the work });

Question 10

이것이 내가 clearInterval() 메서드를 사용하여 10초 후에 타이머를 중지하는 방법입니다.

 function startCountDown() { var countdownNumberEl = document.getElementById('countdown-number'); var countdown = 10; const interval = setInterval(() => { countdown = --countdown <= 0 ? 10 : countdown; countdownNumberEl.textContent = countdown; if (countdown == 1) { clearInterval(interval); } }, 1000) }

 <head> <body> <button id="countdown-number" onclick="startCountDown();">Show Time </button> </body> </head>

Question 11

nodeJS에서는 setInterval 함수 내에서 " this " 특수 키워드를 사용할 수 있습니다.

이 키워드를 사용하여 clearInterval에 사용할 수 있으며 다음은 예입니다.

 setInterval( function clear() { clearInterval(this) return clear; }() , 1000)

함수 내에서 이 특수 키워드의 값을 인쇄할 때 Timeout {...}

Question 12

일정 시간 후에 간격을 중지하려면 setTimeOut을 사용하십시오.

 var interVal = setInterval(function(){console.log("Running") }, 1000); setTimeout(function (argument) { clearInterval(interVal); },10000);

Question 13

많은 사람들이 좋은 대답을 clearInterval 이 올바른 해결책입니다.

하지만 편집자가 자바스크립트 타이머를 사용하여 모범 사례를 적용할 수 있도록 더 많은 작업을 수행할 수 있다고 생각합니다.

setTimeout 또는 setInterval 설정한 타이머를 지우는 것을 잊어버리기 쉽습니다. 이로 인해 버그를 찾기 어려울 수 있습니다.

그래서 위의 문제에 대한 eslint 플러그인을 만들었습니다.

https://github.com/littlee/eslint-plugin-clean-timer

Question 14

다음 코드가 도움이 될 것 같습니다.

 var refreshIntervalId = setInterval(fname, 10000); clearInterval(refreshIntervalId);

당신은 코드를 100% 맞았습니다... 그래서... 문제가 무엇입니까? 아니면 튜토리얼...

Question 15

노력하다

 let refresch = ()=> document.body.style= 'background: #' +Math.random().toString(16).slice(-6); let intId = setInterval(refresch, 1000); let stop = ()=> clearInterval(intId);

 body {transition: 1s}

 <button onclick="stop()">Stop</button>

Question 16

clearInterval()

이 기능을 사용하여 코드를 시작하고 일시 중지할 수 있습니다. 이름은 CLEAR라고 되어 있기 때문에 약간 기만적이지만 아무 것도 지우지 않습니다. 실제로는 일시 중지됩니다.

이 코드로 테스트:

HTML:

 <div id='count'>100</div> <button id='start' onclick='start()'>Start</button> <button id='stop' onclick='stop()'>Stop</button>

자바스크립트:

 let count; function start(){ count = setInterval(timer,100) /// HERE WE RUN setInterval() } function timer(){ document.getElementById('count').innerText--; } function stop(){ clearInterval(count) /// here we PAUSE setInterval() with clearInterval() code }

Question 17

 var interval = setInterval(timer, 100); var n = 0; function timer() { n = n + 0.1 document.getElementById('show').innerHTML = n.toFixed(2) } function pause() { clearInterval(interval) } function resume(){ interval = setInterval(timer, 100) }

 <h1 id="show">0</h1> <button id="btn" onclick="pause()">STOP</button> <button id="btn" onclick="resume()">RESUME</button>

Question 18

더 간단한 접근 방식을 사용하지 않는 이유는 무엇입니까? 클래스 추가!

간격에 아무 것도 하지 않도록 지시하는 클래스를 추가하기만 하면 됩니다. 예: 호버에.

 var i = 0; this.setInterval(function() { if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval' console.log('Counting...'); $('#counter').html(i++); //just for explaining and showing } else { console.log('Stopped counting'); } }, 500); /* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */ $('#counter').hover(function() { //mouse enter $(this).addClass('pauseInterval'); },function() { //mouse leave $(this).removeClass('pauseInterval'); } ); /* Other example */ $('#pauseInterval').click(function() { $('#counter').toggleClass('pauseInterval'); });

 body { background-color: #eee; font-family: Calibri, Arial, sans-serif; } #counter { width: 50%; background: #ddd; border: 2px solid #009afd; border-radius: 5px; padding: 5px; text-align: center; transition: .3s; margin: 0 auto; } #counter.pauseInterval { border-color: red; }

 <!-- you'll need jQuery for this. If you really want a vanilla version, ask --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="counter">&nbsp;</p> <button id="pauseInterval">Pause</button></p>

나는 이 빠르고 쉬운 접근 방식을 오랫동안 찾고 있었기 때문에 가능한 한 많은 사람들에게 소개하기 위해 여러 버전을 게시하고 있습니다.

jQuery에서 div 요소 만들기 [중복] (0)	2022.02.17
JavaScript 배열을 무작위화(셔플)하는 방법은 무엇입니까? (0)	2022.02.17
특정 라인에 대한 eslint 규칙 끄기 (0)	2022.02.17
"이전 형제" 선택자가 있습니까? (0)	2022.02.15
1...N을 포함하는 배열을 만드는 방법 (0)	2022.02.15

No error , No gain

JavaScript에서 setInterval 호출 중지

clearInterval()

더 간단한 접근 방식을 사용하지 않는 이유는 무엇입니까? 클래스 추가!

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

티스토리툴바

JavaScript에서 setInterval 호출 중지

clearInterval()

더 간단한 접근 방식을 사용하지 않는 이유는 무엇입니까? 클래스 추가!

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

관련글

티스토리툴바