直接来正经内容:是这样的,有一个逻辑需求,获取字符串或数组的item就执行一下特定方法,但是需要时间间隔,理所当然的逻辑想到是for循环里面运用setTimeout(),但是for循环里用setTimeout()是达不到预想结果的,这样会和没有setTimeout()一样,都是立刻执行完。想要达到预期效果,这里我们就要运用到递归。
举个栗子吧:说我想实现一个HTML打字效果,而需要循环的数据是一个对象,data:{ str : ’… …’ , str2 : ’… …’ } 一个str是一行这个样子,我的处理方式是:将所有数据搞成一个数据,换行用特殊符号代替,然后就是递归循环调用。
//content就是上边的那个data
showContent(){
var that = this;
var data = that.content;
var mData = "";
for (var i in data){
mData += data[i] + '`';
}
that.mContent = mData;
that.contentTimeOut(0);
},
handStr(j){
var that = this;
var count = j;
var str = that.mContent;
count++;
if(count >= str.length){
that.hasCourse = false;
that.fContent = that.inContent;
}else{
if(" " == str.charAt(j)){
that.inContent += ' ';
}else if("`" == str.charAt(j)){
that.inContent += "</br>";
}else{
that.inContent += str.charAt(j);
}
that.fContent = that.inContent + that.course;
that.contentTimeOut(count);
}
},
contentTimeOut(value){
var that = this;
setTimeout(function () {
that.handStr(value)
},that.writeTime)
},
解释一下:我是用vue做的,在mounted()里调用showContent()这样样子能达到预想结果。其实这个是在vue模拟打字组件里的代码,有链接直接可以过去看。
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}