Convert this code to more efficiency pattern

compact-me.js

var idx = 0;
function ToggleStatus(count) {
    idx++;
    if (idx < count) {
        var toggleTimer = $timeout(function () {
            $scope.heroStatType = !$scope.heroStatType;
            ToggleStatus(count);
        }, 1500 * idx + 1000);
    }
}
ToggleStatus(5);

이건 어땡?

function ToggleStatus( count ) {
    var bucket = [], state = $scope.heroStatType;
    while(count) bucket.unshift( [1500 * count  + 1000, state] ), count--, state = !state;
    bucket.forEach( function( b ) {
         $timeout(function( b ) { $scope.heroStatType = b[1]; }, b[0] );
    });
}

타이머를 하나만 셋팅하는 버전

function ToggleStatus( count ) {
    var loop = 1;
    var timerHandle = $timeout( function nextAction(loop) {
        if( loop >= count ) {
            clearTimeout( timerHandle );    // 적절히 바꿔줘야 함
            return;
        }
        $scope.heroStatType  =  !!(loop++ % 1);
        $timeout( function(){
            timerHandle = nextAction( loop );
        }, 1500 * loop + 1000);
    }, 0);
}

3째줄 nextAction(loop) 의 loop 로 값을 바인딩 할 수 없는 문제가 있어서 조금 수정해봤습니다.

var loop = 0, count = 5;

var timerHandle = $timeout((function nextAction(loop) {
    if (loop >= count) {
        $timeout.cancel(timerHandle);
        console.log('clear');
        return;
    }
    console.log(loop);
    $scope.heroStatType = !!(loop++ % 2);
    $timeout(function () {
        timerHandle = nextAction(loop);
    }, 1500 * loop + 1000);
})(loop), 0);

이런 경우 오류가 발생하는데

0 controllers.js:63
TypeError: undefined is not a function
    at http://localhost:8080/js/angular/angular.js:13392:28
    at completeOutstandingRequest (http://localhost:8080/js/angular/angular.js:4032:10)
    at http://localhost:8080/js/angular/angular.js:4338:7 angular.js:9199
1 controllers.js:63
2 controllers.js:63
3 controllers.js:63
4 controllers.js:63
clear controllers.js:60

로그찍어봤습니다.

$timeout 사용법이 잘못되었나봐요. promise 를 반환하는데 이걸 제대로 사용하지 못하고 있으니 발생하는 문제입니다.

var loop = 0, count = 5;

var timerHandle = setTimeout((function nextAction(loop) {
    if (loop >= count) {
        clearTimeout(timerHandle);
        console.log('clear');
        return;
    }
    console.log(loop);
    $scope.heroStatType = !!(loop++ % 2);
    setTimeout(function () {
        timerHandle = nextAction(loop);
    }, 1500 * loop + 1000);
})(loop), 0);

기존 타이머 스크립트를 사용했더니 에러가 없어요. 대신 $scope 에 접근하지 못하는 사태가 발생합니다. ㄷㄷㄷ;

뭔가 간단하게

ToggleStatus(1)(5);

이런 식으로 끝나면 예쁠 것 같아서 시작한 삽질이 여기까지 왔네요.

이런 저런 삽질 중 처음에 작성한 코드를 개선하여 보관

function StatToggle(count) {
    if (idx < count) {
        toggleTimer = setTimeout(function () {
            $scope.heroStatType = !!(idx++ % 2);
            StatToggle(count);
        }, 1500 * idx + 1000);
        console.log(idx);
    } else {
        clearTimeout(toggleTimer);
        console.log('clear');
    }
}
var idx = 0;
var toggleTimer = setTimeout(StatToggle(5), 0);

이것 역시 $scope 에 접근 못하고 있음 투웨이 바인딩이 일어나지 않음

function StatToggle(count) {
    if (idx < count) {
        toggleTimer = $timeout(function () {
            $scope.heroStatType = !!(idx++ % 2);
            StatToggle(count);
        }, 1500 * idx + 1000);
        console.log(idx);
    } else {
        console.log('clear', $timeout.cancel(toggleTimer));
    }
}
var idx = 0;
var toggleTimer = $timeout(StatToggle(5), 0);

cancel 메소드는 false 를 리턴, 프라미스를 제대로 밟고 가야지 그냥 가면 망할 듯;

기록 보관할 겸 추가합니다. 감사합니다.

(function (loop, count) {
    var toggle = function () {
        if (loop < count) {
            $scope.heroStatType = !!(loop++ % 2);
            var statTimer = $timeout(toggle, 1500 * loop + 1000);
            console.log(loop, count);
        }
    };
    toggle();
})(1, 6);

어후 머리아파서 일단 이 정도로 마무리하고~
타이머가 여러 개 생기긴 하지만 ㅜㅜ;

다음 작업 진행하는게 나을것 같아요!