Question

我有一个用户对象

var users = {
  one: {
            name: 'batman',
            age: 25
       },

  two: {
           name: 'spiderman',
           age: 27
       },

  three: {
            name: 'superman',
            age: 26
         }
}


var displayName = function(name) {
  console.log(name);
}

for(var name in users) {
  if(users.hasOwnProperty(name)) {
    displayName(name);
  }
}

我想无限循环对象'users'并每隔5秒调用displayName函数。这样它每隔5秒就会显示一个单一的名字。

放置setInterval的最佳位置在哪里？

以下是DEMO

Answer 1

您必须填充名称数组并迭代它。

永远不要使用setInterval，而是使用setTimeout。

var aNames = []; // array of names
for(var name in users)
    if(users.hasOwnProperty(name)) aNames.push(name);

var nNames = aNames.length, i = 0;
var displayNextName = function() {
    console.log(aNames[i]);
    i = (i + 1) % nNames;
    setTimeout(displayNextName, 5000);
}

displayNextName();

<强>更新

支持无限循环中断/停止的扩展版本：

var aNames = [];
for(var name in users)
    if(users.hasOwnProperty(name)) aNames.push(name);

var nNames = aNames.length, i = 0;
var idTimeout;
var displayNextName = function() {
    console.log(aNames[i]);
    i = (i + 1) % nNames;
    idTimeout = setTimeout(displayNextName, 5000);
}
var stopDisplayNextName = function() {
    if (idTimeout) clearTimeout(idTimeout);
}

displayNextName();

Answer 2

如果将users对象更改为简单数组，则更容易：

var users = [
    {name: 'batman', age: 25},
    {name: 'spiderman', age: 27},
    {name: 'superman', age: 26}
];

更新： ...但是，由于您需要users保留对象，我们可以直接从对象构建我们自己的用户数组：

var users = {
one: {
        name: 'batman',
        age: 25
   },
two: {
       name: 'spiderman',
       age: 27
   },
three: {
        name: 'superman',
        age: 26
     }
};

//Build an array of users from the users object
var userArray = [],
    buildUserArray = (function(){
        for (key in users) {
            if (users.hasOwnProperty(key)){
                userArray.push(users[key]);
            }
        }
    })();

var displayNames = {
    max : userArray.length, 
    current : 0,
    timeout : null,
    go : function() {
        console.log(userArray[this.current]);//the whole user object
        console.log(userArray[this.current].name);//just the name
        this.current = (this.current+1) % this.max;//increment current position
        this.timeout = setTimeout(function(){displayNames.go();}, 500);
    },
    stop : function(){
        clearTimeout(this.timeout);
    }
}
//to start
displayNames.go();
//set to stop after 5 seconds:
setTimeout(function(){displayNames.stop();}, 5000);

http://jsfiddle.net/9txjx9dy/1/（已更新）

Answer 3

    var users = {
    one: {
        name: 'batman',
        age: 25
   },

    two: {
       name: 'spiderman',
       age: 27
    },

    three: {
        name: 'superman',
        age: 26
     }
    }
    var i=0;

    var displayName = function() {

    if(i==1) {
    console.log(users.one.name);
    }
    if(i==2) {
    console.log(users.two.name);
    }
    if(i==3) {
    console.log(users.three.name);
    }
    i= (i+1)%4;
    }


setInterval(function () {displayName(name)}, 3000);

Answer 4

var users = {
    one: {
        name: 'batman',
        age: 25
   },

    two: {
       name: 'spiderman',
       age: 27
    },

    three: {
        name: 'superman',
        age: 26
     }
    }


    var displayName = function(name) {
    console.log(name);
    }

    for(var name in users) {
        if(users.hasOwnProperty(name)) {
        setInterval(function () {displayName(name)}, 3000);
    }
}

Answer 5

var users = {
    one: {
        name: 'batman',
        age: 25
   },

    two: {
       name: 'spiderman',
       age: 27
    },

    three: {
        name: 'superman',
        age: 26
     }
    }
    var i=0;

    var displayName = function() {

    console.log(users[i%3].name);
    i= i+1;
    }


setInterval(function () {displayName()}, 3000);

javascript每5秒无限循环一次对象

5 个答案: