실행 중인 SetInterval 간격 변경
저는 setInterval을 사용하여 특정 횟수의 반복 동안 10분의 1초마다 문자열을 조작하는 Javascript 함수를 작성했습니다.
function timer() {
var section = document.getElementById('txt').value;
var len = section.length;
var rands = new Array();
for (i=0; i<len; i++) {
rands.push(Math.floor(Math.random()*len));
};
var counter = 0
var interval = setInterval(function() {
var letters = section.split('');
for (j=0; j < len; j++) {
if (counter < rands[j]) {
letters[j] = Math.floor(Math.random()*9);
};
};
document.getElementById('txt').value = letters.join('');
counter++
if (counter > rands.max()) {
clearInterval(interval);
}
}, 100);
};
간격을 특정 숫자로 설정하는 대신 실행할 때마다 카운터를 기준으로 업데이트하고 싶습니다.그래서 대신에:
var interval = setInterval(function() { ... }, 100);
이는 다음과 같습니다.
var interval = setInterval(function() { ... }, 10*counter);
불행하게도, 그것은 효과가 없었습니다."10*카운터"가 0인 것처럼 보였습니다.
그렇다면 익명 함수가 실행될 때마다 간격을 어떻게 조정할 수 있습니까?
익명 기능을 사용할 수 있습니다.
var counter = 10;
var myFunction = function(){
clearInterval(interval);
counter *= 10;
interval = setInterval(myFunction, counter);
}
var interval = setInterval(myFunction, counter);
업데이트: A가 제안한 대로입니다.울프, 사용setTimeout
의 필요성을 피하기 위해clearInterval
.
var counter = 10;
var myFunction = function() {
counter *= 10;
setTimeout(myFunction, counter);
}
setTimeout(myFunction, counter);
사용하다setTimeout()
대신.그런 다음 콜백이 다음 시간 제한을 실행합니다. 이 시점에서 시간을 늘리거나 다른 방법으로 시간을 조정할 수 있습니다.
편집
모든 함수 호출에 대해 "감속" 시간 초과를 적용하는 데 사용할 수 있는 일반 함수입니다.
function setDeceleratingTimeout(callback, factor, times)
{
var internalCallback = function(tick, counter) {
return function() {
if (--tick >= 0) {
window.setTimeout(internalCallback, ++counter * factor);
callback();
}
}
}(times, 0);
window.setTimeout(internalCallback, factor);
};
// console.log() requires firebug
setDeceleratingTimeout(function(){ console.log('hi'); }, 10, 10);
setDeceleratingTimeout(function(){ console.log('bye'); }, 100, 10);
저는 이 질문을 좋아합니다 - 제 안에 있는 작은 타이머 물체에서 영감을 받았습니다.
window.setVariableInterval = function(callbackFunc, timing) {
var variableInterval = {
interval: timing,
callback: callbackFunc,
stopped: false,
runLoop: function() {
if (variableInterval.stopped) return;
var result = variableInterval.callback.call(variableInterval);
if (typeof result == 'number')
{
if (result === 0) return;
variableInterval.interval = result;
}
variableInterval.loop();
},
stop: function() {
this.stopped = true;
window.clearTimeout(this.timeout);
},
start: function() {
this.stopped = false;
return this.loop();
},
loop: function() {
this.timeout = window.setTimeout(this.runLoop, this.interval);
return this;
}
};
return variableInterval.start();
};
사용 예
var vi = setVariableInterval(function() {
// this is the variableInterval - so we can change/get the interval here:
var interval = this.interval;
// print it for the hell of it
console.log(interval);
// we can stop ourselves.
if (interval>4000) this.stop();
// we could return a new interval after doing something
return interval + 100;
}, 100);
// we can change the interval down here too
setTimeout(function() {
vi.interval = 3500;
}, 1000);
// or tell it to start back up in a minute
setTimeout(function() {
vi.interval = 100;
vi.start();
}, 60000);
저는 원래 포스터와 같은 질문이 있었는데, 이것을 해결책으로 했습니다.이게 얼마나 효율적인지 모르겠어요...
let interval = 5000; // initial condition
let run = setInterval(request, interval); // start setInterval as "run"
function request() {
console.log(interval); // firebug or chrome log
clearInterval(run); // stop the setInterval()
// dynamically change the run interval
if (interval > 200) {
interval = interval * .8;
} else {
interval = interval * 1.2;
}
run = setInterval(request, interval); // start the setInterval()
}
이것이 제 방식입니다. 저는 setTimeout을 사용합니다.
var timer = {
running: false,
iv: 5000,
timeout: false,
cb : function(){},
start : function(cb,iv){
var elm = this;
clearInterval(this.timeout);
this.running = true;
if(cb) this.cb = cb;
if(iv) this.iv = iv;
this.timeout = setTimeout(function(){elm.execute(elm)}, this.iv);
},
execute : function(e){
if(!e.running) return false;
e.cb();
e.start();
},
stop : function(){
this.running = false;
},
set_interval : function(iv){
clearInterval(this.timeout);
this.start(false, iv);
}
};
용도:
timer.start(function(){
console.debug('go');
}, 2000);
timer.set_interval(500);
timer.stop();
훨씬 더 간단한 방법은 그것을 갖는 것입니다.if
명령을 정기적으로 실행할 수 있는 컨트롤과 새로 고침된 함수의 명령문이 있습니다.다음 예제에서는 2초마다 경고를 실행하고 간격은intrv
) 동적으로 변경할 수 있습니다...
var i=1;
var intrv=2; // << control this variable
var refreshId = setInterval(function() {
if(!(i%intrv)) {
alert('run!');
}
i++;
}, 1000);
원하는 대로 시작할 수 있습니다. 시간 초과는 시간 초과를 유지하기 위해 사용한 방법입니다.
저는 매 시간마다 코드 블록을 시작해야 했습니다.따라서 이 작업은 서버 시작 시 시작되고 간격은 매 시간마다 실행됩니다.기본적으로 초기 실행은 동일한 분 내에 간격을 시작하는 것입니다.따라서 시작 후 1초 이내에 즉시 실행한 후 5초마다 실행합니다.
var interval = 1000;
var timing =function(){
var timer = setInterval(function(){
console.log(interval);
if(interval == 1000){ /*interval you dont want anymore or increment/decrement */
interval = 3600000; /* Increment you do want for timer */
clearInterval(timer);
timing();
}
},interval);
}
timing();
또는 시작할 때 어떤 일이 발생하고 특정 간격으로 영원히 발생하기를 원하는 경우에는 설정된 간격과 동시에 이를 호출할 수 있습니다.예:
var this = function(){
//do
}
setInterval(function(){
this()
},3600000)
this()
여기서는 처음부터 매 시간마다 실행됩니다.
설정한 Intervals도 동기화 및 속도 변경이 되지 않아 질문을 올리려고 했습니다.하지만 방법을 찾은 것 같아요.제가 초보자이기 때문에 확실히 개선되어야 합니다.그래서, 저는 이것에 대한 당신의 의견/댓글을 기꺼이 읽겠습니다.
<body onload="foo()">
<div id="count1">0</div>
<div id="count2">2nd counter is stopped</div>
<button onclick="speed0()">pause</button>
<button onclick="speedx(1)">normal speed</button>
<button onclick="speedx(2)">speed x2</button>
<button onclick="speedx(4)">speed x4</button>
<button onclick="startTimer2()">Start second timer</button>
</body>
<script>
var count1 = 0,
count2 = 0,
greenlight = new Boolean(0), //blocks 2nd counter
speed = 1000, //1second
countingSpeed;
function foo(){
countingSpeed = setInterval(function(){
counter1();
counter2();
},speed);
}
function counter1(){
count1++;
document.getElementById("count1").innerHTML=count1;
}
function counter2(){
if (greenlight != false) {
count2++;
document.getElementById("count2").innerHTML=count2;
}
}
function startTimer2(){
//while the button hasn't been clicked, greenlight boolean is false
//thus, the 2nd timer is blocked
greenlight = true;
counter2();
//counter2() is greenlighted
}
//these functions modify the speed of the counters
function speed0(){
clearInterval(countingSpeed);
}
function speedx(a){
clearInterval(countingSpeed);
speed=1000/a;
foo();
}
</script>
페이지가 로드된 후 카운터가 증가하기 시작하려면 다음을 수행합니다.counter1()
그리고.counter2()
foo()
앞에countingSpeed
이 호출됩니다.그렇지 않으면 필요합니다.speed
의▁edit초. : 더 짧은 EDIT : 답변이 짧습니다.
(function variableInterval() {
//whatever needs to be done
interval *= 2; //deal with your interval
setTimeout(variableInterval, interval);
//whatever needs to be done
})();
더 이상 단축할 수 없습니다
감속/가속 간격 타이머를 만드는 또 다른 방법은 다음과 같습니다.총 시간이 초과될 때까지 구간에 요인이 곱됩니다.
function setChangingInterval(callback, startInterval, factor, totalTime) {
let remainingTime = totalTime;
let interval = startInterval;
const internalTimer = () => {
remainingTime -= interval ;
interval *= factor;
if (remainingTime >= 0) {
setTimeout(internalTimer, interval);
callback();
}
};
internalTimer();
}
새 기능 만들기:
// set Time interval
$("3000,18000").Multitimeout();
jQuery.fn.extend({
Multitimeout: function () {
var res = this.selector.split(",");
$.each(res, function (index, val) { setTimeout(function () {
//...Call function
temp();
}, val); });
return true;
}
});
function temp()
{
alert();
}
의 이 가속 > 감속 < a 래 코 드 조 가 각 은 가 가 속 감 도 또 속 도 는 속 속 아 가 ▁1 < 1) asetInterval
함수:
function accelerate(yourfunction, timer, refresh, acceleration) {
var new_timer = timer / acceleration;
var refresh_init = refresh;//save this user defined value
if (refresh < new_timer ){//avoid reseting the interval before it has produced anything.
refresh = new_timer + 1 ;
};
var lastInter = setInterval(yourfunction, new_timer);
console.log("timer:", new_timer);
function stopLastInter() {
clearInterval(lastInter);
accelerate(yourfunction, new_timer, refresh_init, acceleration);
console.log("refresh:", refresh);
};
setTimeout(stopLastInter, refresh);
}
포함:
timer
또는 Interval 초기값(ms)(증가 또는 감소)refresh
이 운값이나전시간의가 되기timer
계산됩니다.이것은 계단식 조명입니다.acceleration
와timer
value. 스텝 높이입니다.
반복할 때마다 간격을 지우고 타이머 값을 변경한 후 간격을 다시 설정하면 됩니다.도움이 되길 바랍니다 ;)
예를 들어:
const DOMCounter = document.querySelector(".counter")
let timer = 1000
const changeCounter = () => {
clearInterval(interval)
DOMCounter.innerHTML = timer
timer += 1000
timer == 5000 && timer == 1000
interval = setInterval(changeCounter, timer)
}
let interval = setInterval(changeCounter, timer)
<div class="container">
<p class="counter"></p>
</div>
위의 내부 콜백에서 영감을 받아 몇 분 안에 콜백을 실행하는 기능을 만들었습니다.시간 초과가 6000, 15000, 30000, 60000과 같은 간격으로 설정된 경우 시스템 시계의 다음 분으로 정확하게 전환되도록 동기화된 간격을 지속적으로 조정합니다.
//Interval timer to trigger on even minute intervals
function setIntervalSynced(callback, intervalMs) {
//Calculate time to next modulus timer event
var betterInterval = function () {
var d = new Date();
var millis = (d.getMinutes() * 60 + d.getSeconds()) * 1000 + d.getMilliseconds();
return intervalMs - millis % intervalMs;
};
//Internal callback
var internalCallback = function () {
return function () {
setTimeout(internalCallback, betterInterval());
callback();
}
}();
//Initial call to start internal callback
setTimeout(internalCallback, betterInterval());
};
이것은 당신이 루프를 원하지 않을 때를 위한 내 생각입니다.setInterval
겹치다, 겹치다
또한 루프 실행 지연을 설정하고 즉시 루프를 시작 및 중지할 수 있습니다.
는 사용중다니입을 .loop_flag
와 a는setTimeout
기능.
을 주기능다음설정합니다로으을다▁the로 설정했습니다.async
그래서 당신은 신체의 다른 기능들을 호출할 수 있습니다.await
코드의 기본 본문이 실행 중일 때 기본 루프는 대기하고 반복되지 않습니다.(이 경우는 그렇지 않습니다.setInterval
)
간단한 코드의 예는 다음과 같습니다.
//@NabiKAZ
document.getElementById("btn_start").addEventListener("click", function() {
console.log("Starting...");
loop_flag = true;
loop_func();
});
document.getElementById("btn_stop").addEventListener("click", function() {
console.log("Stoping...");
loop_flag = false;
});
var n = 0;
var loop_flag = false;
var loop_func = async function() {
if (!loop_flag) {
console.log("STOP.");
return;
}
//body main function inhere
n++;
console.log(n);
////
if (loop_flag) {
setTimeout(loop_func, document.getElementById("inp_delay").value);
} else {
console.log("STOP.");
}
}
<input id="inp_delay" value="1000">
<button id="btn_start">START</button>
<button id="btn_stop">STOP</button>
루프 내에 가져오기 요청이 있는 보다 완전한 코드는 여기를 참조하십시오.
https://jsfiddle.net/NabiKAZ/a5hdw2bo/
변수를 사용하고 대신 변수를 변경할 수 있습니다.
setInterval(() => function, variable)
var counter = 15;
var interval = function() {
setTimeout(function(){
// Write your code here and remove console.log, remember that you need declare yourDynamicValue and give it a value
console.log((new Date()).getTime())
window.counter = yourDynamicValue;
window.interval();
}, counter);
}
한 번만 init로 실행해야 합니다.
interval();
언급URL : https://stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running
'programing' 카테고리의 다른 글
Amazon AWS 람다와 함께 Spring boot/cloud를 사용해도 값이 주입되지 않습니다. (0) | 2023.08.14 |
---|---|
Git: 로컬 레포가 최신 상태인지 확인하는 방법은 무엇입니까? (0) | 2023.08.14 |
JQuery.handleError를 던지는 Ajax 업로드 플러그인을 찾을 수 없습니다. (0) | 2023.08.14 |
모든 콘솔 메시지에 타임스탬프 추가 (0) | 2023.08.14 |
Oracle 클라이언트 및 네트워킹 구성 요소를 찾을 수 없습니다. (0) | 2023.08.14 |