Javascript Schleife durch Nachrichten

Question

Ich habe 3 Nachrichten in Variablen.

var msg1 = "hello1"; 
var msg2 = "hello2"; 
var msg3 = "hello3"; 

Ich versuche, eine Funktion zu erstellen, dass, wenn ich es zum ersten Mal klicken, um es console.log (msg1), wenn ich es zum zweiten Mal klicken, um es console.log (msg2), 3. Mal console.log (msg3), 4. Mal console.log (msg1) und 5. msg2 usw.

$scope.clickMsg = function() {   
    console.log(msg1); 
} 

ich habe versucht, Schleifen, Timer usw., aber ich konnte es nicht machen.

Weiß jemand, wie man das macht?

Answer 1

ein Array Verwenden Sie stattdessen, und es ist ein bisschen einfacher, würden Sie einfach auf jedem Klick eine Zahl erhöht, und diese Nummer verwenden, um das Element aus dem Array

var msg = [ 
 
    "hello1", 
 
    "hello2", 
 
    "hello3" 
 
]; 
 

 
var i = 0; 
 

 
var $scope = {}; 
 

 
$scope.clickMsg = function() { 
 
    console.log(msg[i]);  
 

 
    i++;       // increment 
 
    if (i === msg.length) i = 0; // reset when end is reached 
 
} 
 

 
document.getElementById('test').addEventListener('click', $scope.clickMsg)

<button id="test">Click</button>

Answer 2

wählen Es gibt ein paar Möglichkeiten, dies in Bezug auf den Zugriff auf die Zeichenfolge zu tun, ich würde empfehlen, sie in ein Array zu setzen, anstatt auf das globale/umschriebene Objekt zuzugreifen, aber es liegt an Ihnen. Wie auch immer auf den Code.

var messagesArray = ["hello1", "hello2", "hello3"]; 
 
var messagesObject = { 
 
    msg1: "hello1", 
 
    msg2: "hello2", 
 
    msg3: "hello3" 
 
} 
 

 
var counter = 0; 
 

 
function LogMessage() { 
 
    console.log(messagesArray[counter % 3]); 
 
    console.log(messagesObject["msg" + (counter % 3 + 1)]); 
 
    counter++ 
 
}

<button onclick="LogMessage()">Click Me</button>

Answer 3

einfach mit Inkrementwert wie diese

var msg1 = "hello1"; 
var msg2 = "hello2"; 
var msg3 = "hello3"; 
var c = 1; 
$scope.clickMsg = function() { 
c = c > 3 ? 1 : c; 
console.log(window['msg'+c]) 
c++; 
} 

Arbeiten verwenden Snippet

var msg1 = "hello1"; 
 
    var msg2 = "hello2"; 
 
    var msg3 = "hello3"; 
 
    var c = 1; 
 
    var $scope={} //for testing 
 
    $scope.clickMsg = function() { 
 
    c = c > 3 ? 1 : c; 
 
    console.log(window['msg'+c]) 
 
    c++; 
 
    } 
 
    
 
    function check(){ //for testing 
 
    $scope.clickMsg(); 
 
    }

<button onclick="check()">click</button>

Answer 4

Die Alternative i wenn nötig oder etwas s Bereiche verwenden, sie als

this["msg"+i] = "some stuff"; 

definieren und sie als

this.msg0; 

Answer 5

nur etwas tun, wie diese abrufen, wird für Sie arbeiten, stellen Sie sicher, dass Sie es zurückzusetzen, sonst nach erste Schleife, erhalten Sie undefined:

var msgs = ["hello1","hello2","hello3"], i=0; 

$scope.clickMsg = function() { //angular $scope for example 
    console.log(msgs[i]); 

    if(i < msgs.length-1) { 
    i++; 
    } else { 
    i=0; //reset the loop 
    } 
} 

Answer 6

ES6 Generators basierte Version:

var messages = (function*() { 
    for(;;) { yield msg1; yield msg2; yield msg3; } 
})() 

$scope.clickMsg = function() {   
    console.log(messages.next().value); 
} 

Im Gegensatz zu anderen Antworten müssen Sie keinen anderen Datentyp verwenden und arbeiten auch für die lokal begrenzten Variablen (d. H. Nicht-Fensterbereichsvariablen).

Try It Online !