js 递归函数，简化代码

[dwa4821]

如果 if else条件里和mumber比较的数字是一组数组。元素数量不定。
如何用递归函数的方式简化下列if else。
thanks

// JavaScript Document
(function(){
	var mamture_progress = $('#mamture_progress');
	var progress_content = $('#progress_content');
	var l = 0;
	var _number = progress_content.attr('data-progress');
	var timer = null;
	var pro = 0;

	
	if ( _number >= 200 && _number < 1000  ) {
		lad(200, 200, '.progress-box-1', function(){
			mamture_progress.addClass('v1');
			lad(_number-200, 1000-200, '.progress-box-2',function(){
				$('.progress-box-2').addClass('active');
				
			});
		});
	};

	if ( _number >= 1000 && _number < 5000  ) {
		lad(200, 200, '.progress-box-1', function(){
			mamture_progress.addClass('v1')
			lad(1000, 1000, '.progress-box-2',function(){
				mamture_progress.addClass('v2');
				lad(_number-1000, 5000-1000, '.progress-box-3',function(){
					$('.progress-box-3').addClass('active');
					
				})
			});
		});
	};

	if ( _number >= 5000 && _number < 10000  ) {
		lad(200, 200, '.progress-box-1', function(){
			mamture_progress.addClass('v1')
			lad(1000, 1000, '.progress-box-2',function(){
				mamture_progress.addClass('v2')
				lad(5000, 5000, '.progress-box-3', function(){
					mamture_progress.addClass('v3')
					lad(_number-5000, 10000-5000, '.progress-box-4',function(){
						$('.progress-box-4').addClass('active');
					
					})
				})
			});
		});
	};

	if ( _number >= 10000) {
		lad(200, 200, '.progress-box-1', function(){
			mamture_progress.addClass('v1')
			lad(1000, 1000, '.progress-box-2',function(){
				mamture_progress.addClass('v2')
				lad(5000, 5000, '.progress-box-3', function(){
					mamture_progress.addClass('v3')
					lad(10000, 10000, '.progress-box-4',function(){
						mamture_progress.addClass('v4')
						lad(_number-10000,10000000,'.progress-box-5')
					})
				})
			});
		});
	};

	/*
	 @number : 成长值
	 @max : 最大值
	 @callback : 回调方法
	 */
	function lad(number, max, cls, callback){
		l = 0;
		timer = setInterval(function(){
			if ( number <= 200 ) {
				l++;
			}else if( number > 200 && number <= 1000 ){
				l+=5;
			}else if( number > 1000 && number <= 5000 ){
				l+=10;
			}else if( number > 5000 && number <= 10000 ){
				l+=20;
			}else{
				l+=30;
			};

			pro = (l/max)*3.7;				//100为  div的长度
			if ( l >= number ) {
				clearInterval(timer);
				if ( callback ) callback();   //回调
			};
			$(cls).css({
				width : pro+'em'
			})
		},1)
	}
})();
	

[蚂蚁上树]

200到1000这样的区间和递归没有关系吧。。

[dwa4821]

引用 1 楼 lihe5201234 的回复:

200到1000这样的区间和递归没有关系吧。。

把lad方法写成递归方式

[Hello World,]

<script>
    var lad = {
        start: 0,
        index: 0,
        args: [
            { start: 200, lessthan: 1000, max: 1000, className: 'V1', selecter: '.progress-box-1' },
            { start: 1000, lessthan: 5000, max: 5000, className: 'V2', selecter: '.progress-box-2' },
            { start: 5000, lessthan: 10000, max: 10000, className: 'V3', selecter: '.progress-box-3' },
            { start: 10000, lessthan: 10000000, max: 10000000, className: 'V4', selecter: '.progress-box-4' },
        ],
        tip: function () {
            if (this.start >= this.args[this.index].start) {
                //start todo something
                if (this.start >= this.args[this.index].max) {
                    alert(this.args[this.index].start + ',' + this.args[this.index].start + ',' + this.args[this.index].className);
                } else {
                    alert((this.start - this.args[this.index].start) + ',' + (this.args[this.index].max - this.start) + ',' + this.args[this.index].className);
                }
                //end todo something

                //loop
                if (this.start >= this.args[this.index].max) {
                    this.index++;
                    if (this.index < this.args.length) {
                        this.tip();
                    }
                }
            }
        }
    };
    lad.start = 20000;
    lad.tip();
</script>

[Hello World,]

或者这样写：

    function test(number) {
        var index = 0;
        var args = [
            { start: 200, lessthan: 1000, max: 1000, className: 'V1', selecter: '.progress-box-1' },
            { start: 1000, lessthan: 5000, max: 5000, className: 'V2', selecter: '.progress-box-2' },
            { start: 5000, lessthan: 10000, max: 10000, className: 'V3', selecter: '.progress-box-3' },
            { start: 10000, lessthan: 10000000, max: 10000000, className: 'V4', selecter: '.progress-box-4' }
        ];
        function run() {
            if (number >= args[index].start) {
                //start todo something
                alert(args[index].start + ',' + args[index].start + ',' + args[index].className);
                if (number < args[index].max) {
                    alert((number - args[index].start) + ',' + (args[index].max - args[index].start) + ',' + args[index].className);
                }
                //end todo something

                //loop
                if (number >= args[index].max) {
                    index++;
                    if (index < args.length) {
                        run();
                    }
                }
            }
        }
        run();
    }
    test(48000);