在 Javascript 中更改对象的属性

Question

Hi i am trying to refresh the value of a property inside an object after delay of one second i am using setInterval function for that purpose but value of the property i get is not right

            var nextlvl = '';
            function showPlaybackData() {

                            if(j.nextLevel == -1){

                                nextlvl = '';

                            }else if(j.nextLevel == 0){

                                nextlvl = '240p';

                            }else if(j.nextLevel == 1){

                                nextlvl = '360p';

                            }else if(j.nextLevel == 2){

                                nextlvl = '480p';

                            }else if(j.nextLevel == 3){

                                nextlvl = '720p';

                            }else if(j.nextLevel == 4){

                                nextlvl = '1080p';

                            }
                            console.log(nextlvl);
                            return nextlvl;

                        }

                var g = {
                    id: -1,
                    label: 'auto(' + setInterval( showPlaybackData , 1000) +')',
                    selected: -1 === j.manualLevel
                };
                e.push(g)

the property label's value should be one of these resolutions i am setting according to condition but it shows 14 or 18 or 15. any solution to that? when i use console.log i get accurate value within the function but when i call the function in setInterval the value is not right.

Answer 1

You need to refactor the code so that you use nextlvl within the function, instead of returning it. It's difficult to answer without seeing your full code, but something like this :

var j = ....
var e = [];
var g = {
    id: -1,
    selected: -1 === j.manualLevel
};
function showPlaybackData() {
    var nextlvl = '';
    if(j.nextLevel == 8){
        nextlvl = '';
    }else if(j.nextLevel == 0){
        nextlvl = '240p';
    }else if(j.nextLevel == 1){
        nextlvl = '360p';
    }else if(j.nextLevel == 2){
        nextlvl = '480p';
    }else if(j.nextLevel == 3){
        nextlvl = '720p';
    }else if(j.nextLevel == 4){
        nextlvl = '1080p';
    }
    console.log(nextlvl);
    g.label = 'auto(' + nextlvl +')';
    e.push(g);
};

setInterval(showPlaybackData, 1000);

As a note, you should consider looking at switch statements, if you're not aware of them, as an alternative to the if/else s.

Answer 2

setInterval returns an identifier that allows you to retrieve (and, for example, clear) the timer, rather than the result of the function. Rather than returning the value you want in the function that's looped, you'll need to set a value in an object whose scope you have access to from within that loop.

Answer 3

May be this works for you :

function showPlaybackData(jpassed) {                    
                        var nextlvl = '';
                        switch(jpassed.nextLevel) {
                            case '':
                                      nextlvl = '';
                                      break;
                            case '240p':
                                      nextlvl = '240p';
                                      break;
                            case '360p':
                                      nextlvl = '360p';
                                      break;
                            case '480p':
                                      nextlvl = '480p';
                                      break;
                            case '720p':
                                      nextlvl = '720p';
                                      break;
                            case '1080p':
                                      nextlvl = '1080p';
                                      break;
                            default:
                                // any default logic
                        }
                        console.log(nextlvl);
                        return nextlvl;
}

And then update your object inside setinterval :

var j = ...
var g = {
             id: -1,
             label:'',
             selected: -1 === j.manualLevel
         };
setInterval(function(){
                          g.label = 'auto(' +showPlaybackData(j)+')' ;
                          e.push(g)                              
                    },2000,j,showPlaybackData,g);

@Karl Reid : Thanx Karl, I've updated the answer.