重複JS函數

Question

我試着在它的循環結束時重複這個函數。我試着將函數分配給一個變量並在回調中調用變量，但失敗了。我試圖在setInterval函數中包裝這個函數，但仍然無法使其工作。

我該如何獲得這個函數來運行一個無限循環並重復它自己？

$("span.text-change").typed({ 
    strings: ["First sentence.", "Second sentence."], 
    typeSpeed: 30, // typing speed 
    backDelay: 500, // pause before backspacing 
    callback: function() { 
     // do stuff 
    } 
}); 

這是插件： Typed JS

jsFiddle here

Answer 1

把你的代碼在一個區間是一個好主意。但是，在再次調用代碼之前，您必須檢查代碼執行是否已完成。你可以用一個布爾變量作爲標誌來做到這一點。

var timerId = setInterval(function() { 
    flag=true; 
if(flag){ 
    flag=false; 
    $("div").typed({ 
    strings: ["First sentence.", "Second sentence."], 
    typeSpeed: 30, // typing speed 
    backDelay: 500, // pause before backspacing 
    callback: function() { 
     flag=true; 
     //destroy typed plugin here. See in the api if 
     //there is a method for doing that. 

    } 
}); 

} 

}, 1000); 

當你wan't停止循環，你可以簡單地銷燬計時器

clearInterval(timerId); 

編輯：我添加了一個選項，以插件

$("#typed").typed({ 
    strings: ["Typed.js is a jQuery plugin.", "It types out sentences."], 
    typeSpeed: 30, 
    backDelay: 500, 
    loop:true, 
    callback: function(){ alert('end'); } 
}); 

編輯插件文件

!function($){ 

    "use strict"; 

    var Typed = function(el, options){ 

     // for variable scope's sake 
     self = this; 

     // chosen element to manipulate text 
     self.el = $(el); 
     // options 
     self.options = $.extend({}, $.fn.typed.defaults, options); 

     // text content of element 
     self.text = self.el.text(); 

     // typing speed 
     self.typeSpeed = self.options.typeSpeed; 

     // typing speed 
     self.loop = self.options.loop; 

     // amount of time to wait before backspacing 
     self.backDelay = self.options.backDelay; 

     // input strings of text 
     self.strings = self.options.strings; 

     // character number position of current string 
     self.strPos = 0; 

     // current array position 
     self.arrayPos = 0; 

     // current string based on current values[] array position 
     self.string = self.strings[self.arrayPos]; 

     // number to stop backspacing on. 
     // default 0, can change depending on how many chars 
     // you want to remove at the time 
     self.stopNum = 0; 

     // number in which to stop going through array 
     // set to strings[] array (length - 1) to stop deleting after last string is typed 
     self.stopArray = self.strings.length-1; 

     // All systems go! 
     self.init(); 
    } 

     Typed.prototype = { 

      constructor: Typed 

      , init: function(){ 
       // begin the loop w/ first current string (global self.string) 
       // current string will be passed as an argument each time after this 
       self.typewrite(self.string, self.strPos); 
       self.el.after("<span id=\"typed-cursor\">|</span>"); 
      } 

      // pass current string state to each function 
      , typewrite: function(curString, curStrPos){ 

       // varying values for setTimeout during typing 
       // can't be global since number changes each time loop is executed 
       var humanize = Math.round(Math.random() * (100 - 30)) + self.typeSpeed; 

       // ------ optional ------ // 
       // custom backspace delay 
       // if (self.arrayPos == 1){ 
       // self.backDelay = 50; 
       // } 
       // else{ self.backDelay = 500; } 

       // containg entire typing function in a timeout 
       setTimeout(function() { 

        // make sure array position is less than array length 
        if (self.arrayPos < self.strings.length){ 

         // start typing each new char into existing string 
         // curString is function arg 
         self.el.text(self.text + curString.substr(0, curStrPos)); 

         // check if current character number is the string's length 
         // and if the current array position is less than the stopping point 
         // if so, backspace after backDelay setting 
         if (curStrPos > curString.length && self.arrayPos < self.stopArray){ 
          clearTimeout(); 
          setTimeout(function(){ 
           self.backspace(curString, curStrPos); 
          }, self.backDelay); 
         } 

         // else, keep typing 
         else{ 
          // add characters one by one 
          curStrPos++; 
          // loop the function 
          self.typewrite(curString, curStrPos); 
          // if the array position is at the stopping position 
          // finish code, on to next task 
          if (self.arrayPos == self.stopArray && curStrPos == curString.length){ 
           // animation that occurs on the last typed string 
           // place any finishing code here 

           if(self.loop){ 
             self.arrayPos=0; 
             curStrPos=0; 
           }else{ 
           self.options.callback(); 
           clearTimeout();} 
          } 
         } 
        } 

       // humanized value for typing 
       }, humanize); 

      } 

      , backspace: function(curString, curStrPos){ 

       // varying values for setTimeout during typing 
       // can't be global since number changes each time loop is executed 
       var humanize = Math.round(Math.random() * (100 - 30)) + self.typeSpeed; 

       setTimeout(function() { 

         // ----- this part is optional ----- // 
         // check string array position 
         // on the first string, only delete one word 
         // the stopNum actually represents the amount of chars to 
         // keep in the current string. In my case it's 14. 
         // if (self.arrayPos == 1){ 
         // self.stopNum = 14; 
         // } 
         //every other time, delete the whole typed string 
         // else{ 
         // self.stopNum = 0; 
         // } 

        // ----- continue important stuff ----- // 
         // replace text with current text + typed characters 
         self.el.text(self.text + curString.substr(0, curStrPos)); 

         // if the number (id of character in current string) is 
         // less than the stop number, keep going 
         if (curStrPos > self.stopNum){ 
          // subtract characters one by one 
          curStrPos--; 
          // loop the function 
          self.backspace(curString, curStrPos); 
         } 
         // if the stop number has been reached, increase 
         // array position to next string 
         else if (curStrPos <= self.stopNum){ 
          clearTimeout(); 
          self.arrayPos = self.arrayPos+1; 
          // must pass new array position in this instance 
          // instead of using global arrayPos 
          self.typewrite(self.strings[self.arrayPos], curStrPos); 
         } 

       // humanized value for typing 
       }, humanize); 

      } 

     } 

    $.fn.typed = function (option) { 
     return this.each(function() { 
      var $this = $(this) 
      , data = $this.data('typed') 
      , options = typeof option == 'object' && option 
      if (!data) $this.data('typed', (data = new Typed(this, options))) 
      if (typeof option == 'string') data[option]() 
     }); 
    } 

    $.fn.typed.defaults = { 
     strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"], 
     // typing and backspacing speed 
     typeSpeed: 0, 
     // time before backspacing 
     backDelay: 500, 
     loop:false, 
     // ending callback function 
     callback: function(){ null } 
    } 


}(window.jQuery); 

Answer 2

你試過：

var myFunc = function() { 
    $("span.text-change").typed({ 
    strings: ["First sentence.", "Second sentence."], 
    typeSpeed: 30, // typing speed 
    backDelay: 500, // pause before backspacing 
    callback: function() { 
     myFunc(); 
    } 
    }); 
} 

Answer 3

Typed.js作者在這裏。我認爲這真是令人敬畏的人喜歡我的代碼足以挖掘它，並使更多的功能工作。我絕對計劃使循環成爲您可以設置的默認功能，但現在這是一個修復。

http://jsfiddle.net/LSsZr/8/

主要變化

self.stopArray = self.strings.length; 
// instead of self.stopArray = self.strings.length-1; 

這使得stopArray變量允許一次最後一個字符串鍵入繼續退格。否則，一旦打印完最後一張，它就會停止。

---

// if (self.arrayPos == self.stopArray && curStrPos == curString.length){ 
// animation that occurs on the last typed string 
// place any finishing code here 
// self.options.callback(); 
// clearTimeout(); 
// } 

上面已經除去。它檢查輸入的最後一個字符串，並在條件滿足時觸發一個函數。對於一個循環，我們不希望這樣。

---

else{ 
    self.arrayPos = 0; 
    self.typewrite(self.string, self.strPos); 
} 

上面已被添加作爲一個else以下if語句...

if (self.arrayPos < self.strings.length){ 

因此，如果在陣列位置小於弦的在陣列，類型量他們。否則，將位置重置爲0，然後再次運行原始功能。

繼續並使用jsfiddle中的代碼作爲typed.js文件，然後在您想要的頁面上正常運行它。不再有回調（），但！

讓我知道您的想法/問題！

編輯 貌似有人在這裏增加了一個循環的插件，但它只是一遍又一遍地循環的最後一句話：對

你要重置數組中的字符串被送到打字功能。這在其他解決方案中沒有發生。

Answer 4

$(func = function() { 
     $(".element").typed({ 
      strings: ['Statement One', 
      'Satemante Two', 
      'Statemante Three', ''], 
      typeSpeed: 40, // typing speed 
      backDelay: 2000, 
      callback: function(){ 
      func(); 
      } 
     }); 

    }); 

Answer 5

試試這個：

$(".typed-text").typed({ 
    strings: ["test 1", "test 2", "test 3", "test 4"], 
    typeSpeed: 10, 
    backDelay: 1500, 
    loop: !0, // here 
    startDelay: 1000, 
}); 

Answer 6

只需添加屬性循環：1。無限循環

$（」輸入文本 「）鍵入（{ 字符串：[」 測試1" ， 「試驗2」， 「測試3」， 「測試4」]， typeSpeed：10， backDelay：1500， loop：1，// here }）;