setTimeout（）回調多個$ .each

Question

我知道有很多例子，但在我的例子中，我不明白這是怎麼回事。

我必須setTimeout()函數，我需要在第一次結束時運行第二個timeout。

Demo

var title = $(".form-title").attr("data-title"); 
 
var fname = $(".form-name").attr("data-name"); 
 

 
$.each(title.split(''), function(i, letter) { 
 
    setTimeout(function() { 
 
    $('.form-title').html($('.form-title').html() + letter); 
 
    }, 100 * i); 
 
}); 
 

 
$.each(fname.split(''), function(i, letter) { 
 
    setTimeout(function() { 
 
    $('.form-name label:nth-of-type(1)').html($('.form-name label:nth-of-type(1)').html() + letter); 
 
    }, 100 * i); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<h2 class="form-title" data-title="Dear Concept Studio,"></h2> 
 
<p class="form-name" data-name="Hello, I'm"> 
 
    <label></label> 
 
</p>

Answer 1

你沒有任何。但是當計數器到達最後一個元素時，您可以使用counter來調用該函數。

我所做的：

1. 創建一個counter變量
2. 移動的代碼來顯示第二個字符串的動畫在另一個單獨的函數
3. 遞增counter每個字符追加
後
4. 檢查是否counter等於字符串的length，如果它然後調用將動畫第二個字符串的函數。

Demo

var title = $(".form-title").attr("data-title"); 
 
var fname = $(".form-name").attr("data-name"); 
 

 
var counter = 0; 
 
$.each(title.split(''), function(i, letter) { 
 
    setTimeout(function() { 
 
    $('.form-title').html($('.form-title').html() + letter); 
 

 
    ++counter === title.length && animateSecond(); 
 
    }, 100 * i); 
 
}); 
 

 
function animateSecond() { 
 
    $.each(fname.split(''), function(i, letter) { 
 
    setTimeout(function() { 
 
     $('.form-name label:nth-of-type(1)').html($('.form-name label:nth-of-type(1)').html() + letter); 
 
    }, 100 * i); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<h2 class="form-title" data-title="Dear Concept Studio,"></h2> 
 

 
<p class="form-name" data-name="Hello, I'm TJ. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, corporis, omnis? Maiores alias expedita, quis, aliquam, assumenda deserunt molestias maxime non, natus cupiditate illo harum. Amet autem inventore quis adipisci!"> 
 
    <label></label> 
 
</p>