[解決済み] SetIntervalの実行中に間隔を変更したい
2022-04-20 19:29:21
質問
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*counter"が0になるように思えたのです。
では、匿名関数を実行するたびに間隔を調整するにはどうすればよいのでしょうか。
どのように解決するのですか?
使用方法
setTimeout()
の代わりに コールバックは次のタイムアウトを発生させる役割を果たし、その時点でタイミングを増やすなど操作することができます。
EDIT
ここに、あらゆる関数呼び出しに対して "減速"タイムアウトを適用するために使用できる汎用関数があります。
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);
関連
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueのクラススタイルの使い方の詳細
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] JavaScriptの配列宣言で「Array()」と「[]」はどう違うのですか?
-
[解決済み] setInterval関数の初回実行を遅延させずに実行する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
JSアレイループと効率解析の比較
-
vueディレクティブv-bindの使用と注意点
-
vue ディレクティブ v-html と v-text
-
Vueの「データを聴く」原則を解説
-
[解決済み] テスト
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
JavaScriptのStringに関する共通メソッド