2015-11-04 34 views
-2

我做了一個旋轉木馬從scracth一些影響,我這樣做是:提高代碼質量[使用Javascript/AngulaJS]

$scope.intro = { 
    index : 0, 
    A : false, 
    B : false, 
    C : false, 
    D : false, 
    E : false, 
    F : false, 
    G : false, 
    H : false, 
    I : false, 
    L : false, 
    M : false, 
    N : false 
}; 

var intervallo = 4000; 
var action = function(){ 
    $scope.intro.N = false; 
    $scope.intro.A = true; 
    $timeout(function() { 
     $scope.intro.index++; 
     $scope.intro.A = false; 
     $scope.intro.B = true; 
     $timeout(function() { 
      $scope.intro.index++; 
      $scope.intro.B = false; 
      $scope.intro.C = true; 
      $timeout(function() { 
       $scope.intro.index++; 
       $scope.intro.C = false; 
       $scope.intro.D = true; 
       $timeout(function() { 
        $scope.intro.index++; 
        $scope.intro.D = false; 
        $scope.intro.E = true; 
        $timeout(function() { 
         $scope.intro.index++; 
         $scope.intro.E = false; 
         $scope.intro.F = true; 
         $timeout(function() { 
          $scope.intro.index++; 
          $scope.intro.F = false; 
          $scope.intro.G = true; 
          $timeout(function() { 
           $scope.intro.index++; 
           $scope.intro.G = false; 
           $scope.intro.H = true; 
           $timeout(function() { 
            $scope.intro.index++; 
            $scope.intro.H = false; 
            $scope.intro.I = true; 
            $timeout(function() { 
             $scope.intro.index++; 
             $scope.intro.I = false; 
             $scope.intro.L = true; 
             $timeout(function() { 
              $scope.intro.index++; 
              $scope.intro.L = false; 
              $scope.intro.M = true; 
              $timeout(function() { 
               $scope.intro.index++; 
               $scope.intro.M = false; 
               $scope.intro.N = true; 
              }, intervallo); 
             }, intervallo); 
            }, intervallo); 
           }, intervallo); 
          }, intervallo); 
         }, intervallo); 
        }, intervallo); 
       }, intervallo); 
      }, intervallo); 
     }, intervallo); 
    }, intervallo); 
}; 

$interval(function(){action()}, 1000, 1); 
$interval(function(){action()}, (intervallo * 12) + 1000); 

現在,它工作得很好,我很滿意了,但我只是想知道是否有更好的方法來寫它。 如果你想看到它在行動上,你可以找到它:mobiliperufficio.com

現在的「新」的代碼是:

var alphaChars = "nabcdefghilmn".toUpperCase().split(""); 

$scope.intro = {}; 
$scope.intro.index = 0; 
var intervallo = 4000; 

var action = function(currentChar, nextChar, i) { 
    $timeout(function() { 
     $scope.intro[currentChar] = false; 
     $scope.intro[nextChar] = true; 
     $scope.intro.index = i; 
    }, intervallo * i); 
}; 

$interval(function() { 
    for (var i = 0; i < alphaChars.length - 1; i++) { 
     action(alphaChars[i], alphaChars[i + 1], i); 
    } 
}, 1000, 1); 
$interval(function(){ 
    for (var i = 0; i < alphaChars.length - 1; i++) { 
     action(alphaChars[i], alphaChars[i + 1], i); 
    } 
}, (intervallo * alphaChars.length) + 1000); 

千恩萬謝

+3

Timeoutception ... foreach循環怎麼樣? –

+4

這必須是我整天看到的最好的東西。 –

回答

0

你也許可以使用一個循環:

var alphaChars = "abcdefghijklmn".toUpperCase().split(""); 

$scope.intro.index++; 
$scope.intro.A = false; 
$scope.intro.B = true; 

for (var i = 0; i < alphaChars.length - 1; i++) { 
    (function(char, nextChar) { 
     $timeout(function() { 
      $scope.intro.index++; 
      $scope.intro[char] = false; 
      $scope.intro[nextChar] = true; 
     }, intervallo); 
    })(alphaChars[i], alphaChars[i + 1]) 
} 
+0

非常感謝您的幫助。 它不起作用(也許是我的錯),它不完全是我對另一個做的,但我理解了「循環邏輯」。 我會和這個一起工作,我看它是否能成爲一個好的提示,謝謝。 – Ale