如何在第一次迭代后停止此电传动画？

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.