如何在第一次迭代後停止此電傳動畫？

Question

我正在做一個使用jQuery的打字效果，並發現這個代碼，並編輯它完美的工作，因爲我需要。

但是，我有一個問題，我無法停止循環。

我試圖檢測到最後一段被打印出來，所以我可以在沒有運氣的情況下添加一個函數。

您的建議和提示表示讚賞。

的代碼是：

http://jsbin.com/araget/33/

(function ($) { 

    function typeString($target, str, cursor, delay, cb) { 
    $target.html(function (_, html) { 
     return html + str[cursor]; 
    }); 

    if (cursor < str.length - 1) { 
     setTimeout(function() { 
     typeString($target, str, cursor + 1, delay, cb); 
     }, delay); 
    } 
    else { 
     cb(); 
    } 
    } 

    function deleteString($target, delay, cb) { 
    var length; 

    $target.html(function (_, html) { 
     length = html.length; 
     return html.substr(0, length - 1); 
    }); 

    if (length > 1) { 
     setTimeout(function() { 
     deleteString($target, delay, cb); 
     }, delay); 
    } 
    else { 
     cb(); 
    } 
    } 

    // jQuery hook 
    $.fn.extend({ 
    teletype: function (opts) { 
     var settings = $.extend({}, $.teletype.defaults, opts); 

     return $(this).each(function() { 
     (function loop($tar, idx) { 
      // type 
      typeString($tar, settings.text[idx], 0, settings.delay, function() { 
      // delete 
      setTimeout(function() { 
       deleteString($tar, settings.delay, function() { 
       loop($tar, (idx + 1) % settings.text.length); 
       }); 
      }, settings.pause); 
      }); 

     }($(this), 0)); 
     }); 
    } 
    }); 

    // plugin defaults 
    $.extend({ 
    teletype: { 
     defaults: { 
     delay: 100, 
     pause: 5000, 
     text: [] 
     } 
    } 
    }); 
}(jQuery)); 

$('#target').teletype({ 
    text: [ 
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,', 
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore', 
    'magna aliquyam erat, sed diam voluptua. At vero eos et' 
    ] 
}); 

$('#cursor').teletype({ 
    text: ['_', ' '], 
    delay: 0, 
    pause: 500 
}); 

Answer 1

你需要從setTimeout()得到處理，並與處理器運行clearTimeout()。

var handler = setTimeout(function() { 
     typeString($target, str, cursor + 1, delay, cb); 
     }, delay); 
.... 
clearTimeout(handler); 

編輯：我修改了你的代碼來解釋你應該停止例程的位置。

檢查此鏈接：http://jsbin.com/enukit/1

你需要多一點清理你的邏輯。光標應該分開或按選項設置，因爲你打算停止循環，這是用來閃爍光標。

(function ($) { 
    // writes the string 
    // 
    // @param jQuery $target 
    // @param String str 
    // @param Numeric cursor 
    // @param Numeric delay 
    // @param Function cb 
    // @return void 

    var handler1, mycount=0, handler2, handler3; 
    function typeString($target, str, cursor, delay, cb) { 
    $target.html(function (_, html) { 
     return html + str[cursor]; 
    }); 
    //alert('cursor:'+cursor); 
    //alert('str.length:'+str); 
    if (cursor < str.length - 1) { 
     handler1 = setTimeout(function() { 
     typeString($target, str, cursor + 1, delay, cb); 
     }, delay); 
    } 
    else { 
     cb(); 
    } 
    } 

    // clears the string 
    // 
    // @param jQuery $target 
    // @param Numeric delay 
    // @param Function cb 
    // @return void 
    function deleteString($target, delay, cb) { 
    var length; 

    $target.html(function (_, html) { 
     length = html.length; 
     return html.substr(0, length - 1); 
    }); 

    if (length > 1) { 
     handler2 = setTimeout(function() { 
     deleteString($target, delay, cb); 
     }, delay); 
    } 
    else { 
     cb(); 
    } 
    } 

    // jQuery hook 
    $.fn.extend({ 
    teletype: function (opts) { 
     var settings = $.extend({}, $.teletype.defaults, opts); 
     $(this).each(function() { 
mycount=0; 
     (function loop($tar, idx) { 
     mycount ++; 
      // type 
      typeString($tar, settings.text[idx], 0, settings.delay, function() { 
      // delete 
      clearTimeout(handler1); 
      handler3 = setTimeout(function() { 
       deleteString($tar, settings.delay, function() { 
       if (mycount<settings.text.length) { 
        loop($tar, (idx + 1));} else { 
clearTimeout(handler3); 
        alert('The end!'); 
        } 
       }); 
      }, settings.pause); 
      }); 

     }($(this), 0)); 
     }); 

    } 
    }); 

    // plugin defaults 
    $.extend({ 
    teletype: { 
     defaults: { 
     delay: 100, 
     pause: 5000, 
     text: [] 
     } 
    } 
    }); 
}(jQuery)); 

$('#target').teletype({ 
    text: [ 
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,', 
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore', 
    'magna aliquyam erat, sed diam voluptua. At vero eos et' 
    ] 
}); 
/* 
$('#cursor').teletype({ 
    text: ['_', ' '], 
    delay: 0, 
    pause: 500 
}); 
*/ 

Answer 2

您可以添加一個參數來停止動畫的循環，並將另一個參數設置爲在動畫結束時調用的回調。假設分別爲forever和end。

// plugin defaults 
$.extend({ 
    teletype: { 
    defaults: { 
     delay: 100, 
     pause: 5000, 
     text: [], 
     forever: true, 
     end: $.noop 
    } 
    } 
}); 

設置forever到true將使最後一個已經到達後的動畫從text第一要素無限期並重啓下去。將forever設置爲false將在第一次迭代達到後停止。

將end設置爲回調函數，該回調函數將在動畫的第一次迭代完成時調用。該選項要求forever設置爲false，否則將永遠不會被調用。

用途：用於

if (settings.forever || (idx + 1 < settings.text.length)) { 
    loop($tar, (idx + 1) % settings.text.length); 
} else { 
    settings.end.call(self); 
} 

代替

loop($tar, (idx + 1) % settings.text.length); 

隨着這些變化應用可以調用teletype用適當的參數。

$('#target').teletype({ 
    text: [ 
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,', 
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore', 
    'magna aliquyam erat, sed diam voluptua. At vero eos et' 
    ], 
    forever: false, 
    end: function(){ 
    alert("Teletype is done!"); 
    } 
}); 

You can see it here.