#javascript #html #css
Вопрос:
Я написал функцию javascript, которая использует setInterval для обработки строки каждую десятую долю секунды в течение определенного количества итераций.
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.
Итак, как я могу регулировать интервал при каждом запуске анонимной функции?
Ответ №1:
Вы могли бы использовать анонимную функцию:
var counter = 10;
var myFunction = function(){
clearInterval(interval);
counter *= 10;
interval = setInterval(myFunction, counter);
}
var interval = setInterval(myFunction, counter);
ОБНОВЛЕНИЕ: как предложил А. Вольф, используйте setTimeout
, чтобы избежать необходимости clearInterval
.
var counter = 10;
var myFunction = function() {
counter *= 10;
setTimeout(myFunction, counter);
}
setTimeout(myFunction, counter);
Комментарии:
1. Ну, РоззА, мой ответ был опубликован 16 сентября ’11, а user28958 — 22 августа ’13, так что я приму «повторное» спасибо!
2. Почему вы используете интервал, простой тайм-аут был бы лучше без необходимости его очистки. например: jsfiddle.net/fgs5nwgn
3. Я придерживался контекста вопроса. setTimeout, конечно, будет работать
4. @A.Wolff Просто примечание, вам не нужно определять переменные времени ожидания… Они ничего не делают
5. И как остановить цикл второго кода?
Ответ №2:
Используйте 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);
Комментарии:
1. Под обратным вызовом вы подразумеваете, что последняя строка функции вызывает себя рекурсивно с помощью setTimeout(…, newInterval) ?
2. Я предполагаю, что это то, что он имел в виду. Я только что попробовал это, и, похоже, это работает. Спасибо, ребята!
3.выдает только 9 приветов 🙂
--t
вероятно, должно бытьt--
jsfiddle.net/albertjan/by5fd4. Делая это рекурсивно, вы не рискуете получить ошибку переполнения стека, если
times
она слишком велика?5. Здесь я придираюсь, но я должен сказать, что этот код довольно сложно читать. Если вы собираетесь использовать фигурные скобки следующей строки, по крайней мере, имейте приличие либо использовать отступ в 4-8 пробелов, либо никогда не выходить за пределы 2 отступов. IMO эта версия намного проще для чтения. Также обратите внимание на переименование
t
totick
, которое было моим лучшим предположением относительно того, что должно означать «t».t
довольно плохое имя переменной.
Ответ №3:
Мне нравится этот вопрос — вдохновил меня на создание небольшого объекта timer:
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 = resu<
}
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);
Комментарии:
1. Спасибо — направьте меня в правильном направлении для чего-то подобного, над чем я работаю.
2. Просто и эффективно. Спасибо!
Ответ №4:
У меня был тот же вопрос, что и у оригинального плаката, сделал это как решение. Не уверен, насколько это эффективно….
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()
}
Комментарии:
1. мне больше нравится этот ответ, потому что он фактически отвечает на OP (и мой) вопрос. setTimeout может быть отложен (из-за 100% загрузки процессора, других скриптов и т. Д.), Когда эти задержки НЕ влияют на setInterval, Что делает его намного лучше для «реального времени»
2. Я на 99% уверен, что ваше утверждение
setInterval
неверно @RozzA — оно по-прежнему подвержено тем же задержкам, что и любой другой JavaScript, и почти каждый браузер также фиксирует setInterval до 4 мс. У вас есть ссылка на сообщение об этом или что-то в этом роде?
Ответ №5:
Это мой способ сделать это, я использую 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();
Комментарии:
1. 1, я немного изменил его для своих целей, чтобы я мог использовать несколько переменных интервалов — jsfiddle.net/h70mzvdq
2. Также изменена
set_interval
функция, чтобы НЕ запускать новое выполнение, если новый интервал не меньше старого..if (iv < this.iv) { clearInterval(this.timeout); this.start(false, iv); } else { this.iv = iv; }
3. Мне также понравилось это решение, но я предпочел бы, чтобы таймер не менялся, если он не отличался на 1/2 секунды от последнего. Я изменил
set_interval
функцию, чтобы быть:let round = Math.trunc( iv / 500) * 500; if (round != this.iv ) { clearInterval( this.timeout ); this.start( false, round ); }
4. Я также изменил это для своего варианта использования.
Ответ №6:
Гораздо более простым способом было бы иметь if
инструкцию в обновленной функции и элемент управления для выполнения вашей команды через регулярные промежутки времени . В следующем примере я запускаю оповещение каждые 2 секунды, и интервал ( intrv
) может быть изменен динамически…
var i=1;
var intrv=2; // << control this variable
var refreshId = setInterval(function() {
if(!(i%intrv)) {
alert('run!');
}
i ;
}, 1000);
Комментарии:
1. Это тоже мой личный фаворит. маленький, простой, расширяемый.
2. Я хотел найти решение для таймера замедления, скорость которого могла бы сбрасываться на основе событий приложения; это отвечало этой потребности просто и идеально. Спасибо.
3. Это круто, но он также запускает интервалы в моменты, когда вам это не нужно … также это немного нечитаемо. По этим причинам я бы лично предпочел setTimeout .
Ответ №7:
Это можно инициировать, как вы хотите. тайм-аут — это метод, который я использовал, чтобы поддерживать его в начале часа.
Мне нужно было каждый час начинать блок кода в час. Таким образом, это начнется при запуске сервера и будет выполняться ежечасно. В основном начальный запуск должен начинаться с интервала в течение той же минуты. Итак, через секунду после инициализации немедленно запускайте каждые 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();
В качестве альтернативы, если вы хотите, чтобы что-то происходило при запуске, а затем навсегда с определенным интервалом, вы могли бы просто вызвать его одновременно с setInterval . Например:
var this = function(){
//do
}
setInterval(function(){
this()
},3600000)
this()
Здесь у нас это выполняется в первый раз, а затем каждый час.
Ответ №8:
Простой ответ: вы не можете обновить интервал уже созданного таймера. (Существует только две функции setInterval/setTimer
и clearInterval/clearTimer
, поэтому, имея a timerId
, вы можете только деактивировать его.) Но вы можете сделать несколько обходных путей. Взгляните на это репозиторий github.
Ответ №9:
Я также не мог синхронизировать и изменять скорость своих setIntervals, и я собирался опубликовать вопрос. Но я думаю, что нашел способ. Это, безусловно, должно быть улучшено, потому что я новичок. Итак, я бы с удовольствием прочитал ваши комментарии / замечания по этому поводу.
<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>
Если вы хотите, чтобы счетчики начали увеличиваться после загрузки страницы, вызывается функция put counter1()
and counter2()
in foo()
before countingSpeed
. В противном случае выполнение занимает speed
миллисекунды.
РЕДАКТИРОВАТЬ: более короткий ответ.
Ответ №10:
(function variableInterval() {
//whatever needs to be done
interval *= 2; //deal with your interval
setTimeout(variableInterval, interval);
//whatever needs to be done
})();
не может быть короче
Ответ №11:
Вот еще один способ создания интервального таймера замедления / ускорения. Интервал умножается на коэффициент, пока не будет превышено общее время.
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();
}
Ответ №12:
Создать новую функцию:
// 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();
}
Ответ №13:
Этот фрагмент кода ниже ускоряет (ускорение> 1) или замедляет (ускорение <1) setInterval
функцию :
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
: начальное значение setInterval в мс (увеличивается или уменьшается)refresh
: время до вычисления нового значенияtimer
. Это длина шагаacceleration
: разрыв между старым и следующимtimer
значением. Это высота шага
Комментарии:
1. я слепой или нет
factor
в вашем коде?2. кроме того, как это остановить?
3. Спасибо. Я исправил ответ:
factor
было старое имя дляacceleration
… теперь все стало понятнее! извините за это. О том, «как это остановить»: я бы передал var (continue = true
) в функцию ускорения и добавил первую строку в функцию ускорения :while (continue) {
4. Я предлагаю, чтобы для остановки вы возвращали функцию, которая очищает интервал и время ожидания, и когда она вызывает
accelerate
снова, вы сохраняете функцию, которую она возвращает, чтобы вызвать ее тоже5. Я создал здесь перо с моими изменениями: codepen.io/Alynva/pen/vYJdwQY?editors=0011
Ответ №14:
Вдохновленный описанным выше внутренним обратным вызовом, я создал функцию для запуска обратного вызова за доли минут. Если время ожидания установлено на интервалы, подобные 6 000, 15 000, 30 000, 60 000 он будет постоянно синхронизировать интервалы с точным переходом на следующую минуту ваших системных часов.
//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());
};
Ответ №15:
Это моя идея для случаев, когда вы не хотите setInterval
, чтобы циклы перекрывались.
Вы также хотите иметь возможность устанавливать задержку выполнения цикла, а также запускать и останавливать цикл мгновенно на лету.
Я использую loop_flag
переменную и setTimeout
функцию.
Я установил для функции main 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>
Более полный код с запросом выборки внутри цикла см. Здесь:
Ответ №16:
Вы можете использовать переменную и вместо этого изменить переменную.
setInterval(() => function, variable)
Ответ №17:
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();
Комментарии:
1. выдает ошибку:
Uncaught TypeError: interval is not a function
но это сработало: jsfiddle.net/fgs5nwgn