機能1が完了したときに機能2を実行する

Question

私は同様の質問が以前に尋ねられ、答えられていることを知っていますが、真実は私がそれらを読んだ後でも必要なことを理解できません。

以下のコードはチュートリアルのものです。これは、タイプライターエフェクト付きのテキストを表示します。 それはすべて正常に動作します。

私はを追加しました。これは、テキストの前にドーズカーソルのように移動します。

タイプライターのアニメーションが完了したら、_ blinkを作ろうとしています。

makeBlink（）をトリガーするためにコールバックが必要ですが、私の人生にとってはどこで使用するのか分かりません。

誰かが私を助けてくれますか？

var char = 0; 
var caption = ""; 

function showCaption(obj) { 
    caption = obj.attr('title'); 
    if(caption) 
     type(); 
} 


function type() { 
    $('#caption').html(caption.substr(0, char++)); 
    if(char < caption.length+1) 
     setTimeout("type()", 150); 
    else { 
     char = 0; 
     caption = ""; 
    } 
} 

function makeBlink(){ 
    $("#cursor").html('<blink>_</blink>'); 
} 


$(window).load(function() { 
    showCaption($("#caption_span")); 
    makeBlink(); // This runs whilst the text is still typing :(
}); 

Answer 1

あなたはそれを持ってどこからmakeBlink();を削除し、それをここに挿入します。

function type() { 
    $('#caption').html(caption.substr(0, char++)); 
    if(char < caption.length+1) 
     setTimeout("type()", 150); 
    else { 
     char = 0; 
     caption = ""; 
     makeBlink(); 
    } 
} 

PSを。 HTML <blink>要素は非常に古く、あまりサポートされていません。たとえtext-decoration: blinkでもほとんどサポートされていません。あなたが持っているtype()関数に似たjavascriptソリューションを使う方が良いでしょう。以下のような何か：

function makeBlink(){ 
    var $cur = $('#cursor'); 
    if($cur.html()) 
     $cur.html(''); 
    else 
     $cur.html('_'); 
    setTimeout(makeBlink, 500); 
} 

やCSS displayまたはvisibilityを使用。

を使用しないように、"type()"をコード内のtypeに変更する必要があります。 （決して文字列をsetTimeoutに渡さないでください）あなたのチュートリアルはあなたに悪い習慣を教えています。

Answer 2

あなたは、type（）関数のelseブランチからmakeBlinkを呼び出します。あなたが設定タイマーを行い、タイピングで行われているときmakeBlink()機能を実行します

function type() { 
    $('#caption').html(caption.substr(0, char++)); 
    if(char < caption.length+1) 
     setTimeout("type()", 150); 
    else { 
     char = 0; 
     caption = ""; 
     makeBlink(); 
    } 
} 

。以前のように、まだタイマーを実行している間に入力を続けながら、makeBlink()関数が呼び出されています。