JQueryを使用してJavascriptでフェードイン/アウトテキストを表示する再帰関数

Question

関数を作成しようとしていますspeak（）文字列の配列を再帰的に実行し、各文字列を内外にフェードし、文字列。ここで私が持っているコードは次のとおりです。

function speak(num, arr, length, time) 
    { 
    if(num < length) 
    { 
     var string = arr[num]; 
     $("#maintext").text(string); 
     $("#maintext").fadeIn(time, function() 
     { 
     $("#maintext").fadeOut(time, speak(num+1, arr, length, time)); 
     }); 
    } 
    } 

私が午前問題は、文字列がフェードインということで、フェードアウトした後、次の文字列に切り替わります。 #maintextが不透明である間に、フェードインしてフェードアウトし、次の文字列に切り替える必要があります。私がこの機能で何を試しても、何がうまくいかないのか分かりません。

各文字列を出力しますが、遷移は間違った場所にあります。

私はJFiddleをまったく動作させることができませんでしたが（私はおそらくそれを間違ってフォーマットしたと思います）。 https://jsfiddle.net/t2q9jdsx/10/

Answer 1

これはあなたに役立つでしょう。最初に.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>

今では、ページ上の複数の要素とシームレスに、作品も同時に

Answer 2

function speak(num, arr, length, time) 
    { 
    console.log("Speak: " + num); 

    if(num < length) 
    { 
     var string = arr[num]; 

     $("#maintext").text(string).promise().done(function(){ 

     $("#maintext").fadeOut(time, function() 
      { 
      if(num != length-1) 
          $("#maintext").fadeIn(time, speak(num+1, arr, length, time)); 
      }); 
     }); 

     } 
    } 

要素上で実行することができ

このと話す機能を交換してみてください。私は.promise（）を追加しました。それが何をするのは値が挿入された後で、fadeOutとfadeInが実行されます、私はこれがあなたを助けると確信しています:)