js setTimeout() 循环事件

直接来正经内容：是这样的，有一个逻辑需求，获取字符串或数组的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模拟打字组件里的代码，有链接直接可以过去看。