javascript每5秒钟无限循环遍历对象

Question

I have a users object

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

I want to loop over the object 'users' infinitely and call displayName function on every 5 seconds. So that it will display one single name after every 5 seconds.

Where is the best place to place the setInterval ?

Here is the DEMO

Answer 1

You have to populate array of names and iterate through it.

And never don't use setInterval , use setTimeout instead.

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();

UPDATE:

Extended version with support of break/stop of infinite looping:

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

It's easier if you change your users object to be a simple array:

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

UPDATE: ...but as you require users to remain an object we can simply build our own array of users directly from the object:

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/ (updated)

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);