javascript函数陷入无限循环

Question

The following code runs into an infinite loop. Why? How do I prevent that?

The problem seems to be the $('.skill-levels').append(formattedskillvalue); line.

var HTMLskillstart = '<ul class="skills"></ul>';
var HTMLskill = '<li class="skill-item">%data%</li>';
var HTMLskillLevel = '<div class="skill-levels"></div>';
var HTMLlevel = '<div class="level" width="%data%"></div>';

var skills = {
    'Html': '70%',
    'css': '60%',
    'javascript': '50%',
    'C': '70%',
    'C++': '60%'
};


skills.display = function() {
    var i = 0;
    $.each(skills, function(key, value) {
        $('.skillset').append(HTMLskillstart);
        var formattedskill = HTMLskill.replace("%data%", key);
        var formattedskillvalue = HTMLlevel.replace("%data%", value);
        $('.skills:last').append(formattedskill, HTMLskillLevel);
        $('.skill-levels').append(formattedskillvalue);
        i++;
        console.log(i);
    });
}

skills.display();

Answer 1

It's a fairly subtle problem: display is a property of skills , so of course $.each will eventually call your callback with key = "display", value = (the function) . Then when you do:

var formattedskillvalue = HTMLlevel.replace("%data%", value);

replace sees a function, and so it calls it. ( replace supports you using a function for the replacement rather than a string.) So you end up recursing forever.

Either don't make display a property of skills , or make it non-enumerable, or put a guard in the $.each callback that skips the code for key == "display" .

Here's an example with a non-enumerable display :

 var HTMLskillstart = '<ul class="skills"></ul>'; var HTMLskill = '<li class="skill-item">%data%</li>'; var HTMLskillLevel = '<div class="skill-levels"></div>'; var HTMLlevel = '<div class="level" width="%data%"></div>'; var skills = { 'Html': '70%', 'css': '60%', 'javascript': '50%', 'C': '70%', 'C++': '60%' }; Object.defineProperty(skills, "display", { value: function() { $.each(skills, function(key, value) { $('.skillset').append(HTMLskillstart); var formattedskill = HTMLskill.replace("%data%", key); var formattedskillvalue = HTMLlevel.replace("%data%", value); $('.skills:last').append(formattedskill, HTMLskillLevel); $('.skill-levels').append(formattedskillvalue); }); } }); skills.display(); 

 <div class="skillset"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

Hey all I found the answer . $.each(skills, function(key, value) this code iterates through the objects key value pairs.

skills.display() is also a part of the object hence at the end of the loop it gets called and gets appended . This in turn makes the loop run again causing the program to enter infinite loop