Question

我在变量中有3条消息。

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

我正在尝试创建一个函数，当我第一次点击它时它是console.log（msg1），当我第二次点击它时它是console.log（msg2），第3次是console.log（msg3），第4次console.log（msg1）和第5次msg2等。

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

我已尝试过循环，定时器等，但我无法使其正常工作。

有谁知道怎么做？

Answer 1

使用数组代替，它更容易一点，你只需在每次点击时增加一个数字，并使用该数字从数组中选择项目

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

基于ES6 Generators的版本：

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

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

与其他答案不同，不要求您使用不同的数据类型，也可以使用本地范围的变量（即非窗口范围的变量）。

Try It Online !

Answer 3

在访问字符串方面有几种方法可以做到这一点，我建议将它们放入数组而不是访问全局/范围对象，但这取决于你。无论如何，代码。

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 4

只需使用像这样的增量值

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++; 
}

工作代码段

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 5

另一种方法是使用范围，将它们定义为

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

并将其检索为

this.msg0;

Answer 6

只做这样的事情，对你有用，确保你在需要时重新设置它或做某事，否则在第一次循环后，你得到未定义：

 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
   }
}

javascript循环消息

6 个答案: