角 - 简单的打字机影响？ [英] Angular – Simple Typewriter Effect?

问题描述

有已经写了一个漂亮的打字机指令，但我在寻找一些更简单，只是增加了每个字母的时间间隔后。我不能得到这个工作。它显示一次全部文本。什么是错的$超时。有没有人有什么建议？

  VAR时间= 1000;
VAR addLetter =功能（我）{
    $ scope.string2 = $ scope.string.substr（0，I）;
};
对于（VAR I = 0，LEN = $ scope.string.length; I＆LT; LEN，我++）{
    （函数（时间）{
        $超时（函数（）{
            addLetter（ⅰ）;
        }，（时间+ 300））;
    }）（一世）;
}
 

解决方案

下面是一个替代方法。

  VAR内容=contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent;$ scope.type =;
变种I = 0;VAR定时器= $间隔（函数（）{
    如果（ⅰ＆下; content.length）
        $ scope.type +内容= [I]
      其他
        $ interval.cancel（定时器）;     我++;
     $ $范围适用于（）。
}，100）;
 

来源： https://gist.github.com/frozonfreak/8018689

演示： http://plnkr.co/edit/BILaWVuNpao2zcIInXLl?p=preVIEW

There is a beautiful typewriter directive already written, but I'm looking for something more simple, that just adds each letter after an interval. I can't get this to work. It shows the text all at once. Something is wrong with the $timeout. Does anyone have any suggestions?

var time = 1000;
var addLetter = function(i) {
    $scope.string2 = $scope.string.substr(0, i);
};
for (var i = 0, len = $scope.string.length; i < len; i++) {
    (function(time) {
        $timeout(function() {
            addLetter(i);
        }, (time + 300));
    })(i);
}

解决方案

Here is an alternate way.

var content = "contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent";

$scope.type = "";
var i=0;

var timer = $interval(function(){
    if(i<content.length)
        $scope.type += content[i];
      else
        $interval.cancel(timer);

     i++; 
     $scope.$apply();
}, 100); 

Credit: https://gist.github.com/frozonfreak/8018689

Demo: http://plnkr.co/edit/BILaWVuNpao2zcIInXLl?p=preview

这篇关于角 - 简单的打字机影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！