Question

以下代码进入无限循环。为什么？我该如何预防？

问题似乎是$('.skill-levels').append(formattedskillvalue);行。

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

这是一个相当微妙的问题：display是skills的属性，因此$.each最终会使用key = "display", value = (the function)调用您的回调。然后当你这样做：

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

replace看到一个函数，所以它调用它。（replace支持使用替换函数而不是字符串。）所以你最终会永远递归。

要么display要skills $.each属性，要么使其不可枚举，要么在key == "display"回调中放一个警卫，跳过{{1}的代码1}}。

以下是一个不可枚举display的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

嘿，我找到了答案。 $ .each（技能，函数（键，值）此代码遍历对象键值对。

skills.display（）也是对象的一部分，因此在循环结束时它被调用并被追加。这反过来使循环再次运行，导致程序进入无限循环

javascript函数进入无限循环

2 个答案: