如何通過使用jQuery

Question

我創建使用jQuery搜索欄陣列工作，我的代碼粘貼下面

小提琴：https://jsfiddle.net/fpLf1to4/

var inputSearch  = $('.searchInput').hide(); 
var searchArray  = ['s','e','a','r','c','h']; 
var searchReturn = ''; 

$('#search').on('click', function(){ 

    $(inputSearch).fadeToggle(500).focus(); 


    for(var i = 0 ; i < searchArray.length ; i++){ 

     searchReturn = searchReturn + searchArray[i]; 

    } 

    $(inputSearch).attr('placeholder', searchReturn[0]); 

}); 

注：我現在只使用第一指數的數組爲我的輸入屬性。

$(inputSearch).attr('placeholder', searchReturn[0]);

現在每隔一秒後，我想我的attr()像

$(inputSearch).attr('placeholder', searchReturn[0] + searchReturn[1]);

，並在第二天第二

$(inputSearch).attr('placeholder', searchReturn[0] + searchReturn[1] + searchReturn[2]);

等進行更新.. 。

Answer 1

您必須使用setInterval函數，而不是for循環。這裏是你如何能做到這：

$('#search').on('click', function(){ 
     $(inputSearch).fadeToggle(500).focus(); 

     var i = 0; 
     var interval = setInterval(function() {    
      searchReturn = searchReturn + searchArray[i];    
      $(inputSearch).attr('placeholder', searchReturn); 
      if(i == searchArray.length - 1) { 
       clearInterval(interval)  
      } 
      i++; 
     }, 2000); 

    }); 

這裏是小提琴：https://jsfiddle.net/fpLf1to4/1/

Answer 2

這是你想要的嗎？ 如果您希望執行速度更快或更慢，您可以更改超時時間。

var inputSearch  = $('.searchInput').hide(); 
var searchArray  = ['s','e','a','r','c','h']; 
var searchReturn = ''; 

$('#search').on('click', function(){ 
    $(inputSearch).fadeToggle(500).focus(); 
    updateSearch();  
}); 

var currentIdx = 0; 
function updateSearch() { 
    var placeholder = $(inputSearch).attr('placeholder') 
    if (placeholder === undefined) { 
     placeholder = ""; 
    } 

    placeholder += searchArray[currentIdx]; 
    $(inputSearch).attr('placeholder', placeholder); 


    currentIdx++; 
    if (currentIdx >= searchArray.length) { 
     return; 
    } 
    setTimeout(updateSearch,500); 
} 

https://jsfiddle.net/fpLf1to4/6/

Answer 3

嘗試利用.queue()，setTimeout

var inputSearch = $('.searchInput').hide(); 
    var searchArray = ['s', 'e', 'a', 'r', 'c', 'h']; 

    $('#search').on('click', function() {  
     inputSearch.queue("s", []) 
     .attr("placeholder", "") 
     .fadeToggle(500).focus() 
     .queue("s", $.map(searchArray, function(value) { 
      return function(next) { 
      $(this).attr("placeholder", function(_, p) { 
       return p === undefined ? value : p + value 
      }); 
      setTimeout(next, 1000) 
      } 
     })).dequeue("s") 
    }); 

的jsfiddle https://jsfiddle.net/fpLf1to4/5/