これはあなたに役立つでしょう。最初に.text
を設定する代わりに、要素をフェードアウトしてからテキストをスワップし、フェードインして戻します。以下のコードを実行すると、動作することがわかります。また、最初のテキストとして#maintext
要素に提供されたテキストコンテンツを使用することも非常に便利です。最後の文字列は、配列を再帰的に終了した後に表示される文字列です。
コードを使用すると、#maintext
は常にfadeOut
で終了します。つまり、すべての文字列を表示した後で常に#maintext
が表示されなくなります。
const speak = ($elem, time, [x,...xs]) => {
if (x === undefined) return null;
$elem.fadeOut(time,() => {
$elem.text(x).fadeIn(time,() => {
speak($elem, time, xs)
})
})
}
let strings = ['foo', 'bar', 'baz', 'bof']
speak($('#maintext'), 1000, strings)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maintext">init</div>
あなたはバベルとあなたのJSをtranspilingていない場合は、事前にES6のバージョンをお勧めします。ここでは、あなたの再帰関数でインデックスを追跡するために状態変数を使用して正しい軌道に乗っていた
function speak($elem, time, strings) {
if (strings[0] === undefined) return null;
$elem.fadeOut(time, function() {
$elem.text(x).fadeIn(time, function() {
speak($elem, time, strings.slice(1))
});
});
}
他の発言
を行きます。しかし、私は一般的に、配列の先頭(最初の要素)をスライスし、残りの要素を使用して再帰するほうが簡単です。あなたのアプローチが同様に実行可能であることを示すために、代わりにインデックスを使用して回答を実装します。
ここでの最大の違いは、私たちが今私たちの関数内の変数(の代わりに、3)を必要とする、と私たちは反復ごとにstrings.length
に対してインデックスを比較する必要があるということです。それは大きな問題ではありませんが、インデックスを追跡して常にアレイlength
をチェックする余分な認知的なオーバーヘッドが、私が与えた最初の答えのフォーム/スタイルを好む理由です。
function speak ($elem, time, strings, i) {
if (i >= strings.length) return;
$elem.fadeOut(time, function() {
$elem.text(strings[i]).fadeIn(time, function() {
speak($elem, time, strings, i + 1);
});
});
}
var strings = ['foo', 'bar', 'baz', 'bof'];
speak($('#maintext'), 1000, strings, 0);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maintext">init</div>
目標:jQueryプラグインjQueryのは、それがめちゃくちゃ簡単にプラグインを作成することができ
。関数の1つの中に.text
または.fadeOut
のようなjQueryメソッドを使用するとすぐに、jQueryプラグインが適しているかどうかを確認する必要があります。
// non-plugin
speak($('#maintext', someStrings))
// plugin
$('#maintext').speak(someStrings)
このケースでは、2番目の選択肢がはるかに優れていることに私は同意するでしょう。それをやるのがいかに簡単かを教えてください。
($ => {
// this function doesn't have to change at all
const speak = ($elem, time, [x,...xs]) => {
if (x === undefined) return null;
$elem.fadeOut(time,() => {
$elem.text(x).fadeIn(time,() => {
speak($elem, time, xs)
})
})
}
// create the plugin; sensible default value for `time`
$.fn.speak = function(strings, time=1000) {
return $(this).each((idx, elem) =>
speak($(elem), time, strings));
};
}) (jQuery);
$('#maintext').speak(['the', 'end', 'of', 'the world']);
$('#othertext').speak(['la', 'fin', 'du', 'monde']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maintext">init</div>
<div id="othertext">init</div>
今では、ページ上の複数の要素とシームレスに、作品も同時に
非常に役に立ちます。ありがとう。 – user2465510
@ user2465510 yw。それ以上の説明が必要な場合はお知らせください。 – naomik
@naomik、いい答え。私は多くを学ぶ。ありがとう。 –