Question

很抱歉要求您的帮助。我正在尝试使用Javascript中的数组将3个函数合而为一。

实际上，我有这段代码可以为我尝试学习的每种语言运行加载栏

function js() {
 var elem3 = document.getElementById("barone");   
 var width = 0;
 var id = setInterval(frame, 50);
 function frame() {
  if (width >= 20) {
    clearInterval(id);
  } else {
    width++; 
    elem3.style.width = width + '%'; 
    elem3.innerHTML = width * 1  + '%';
  }
 }
}
function php() {
  var elem4 = document.getElementById("bartwo");   
  var width = 0;
  var id = setInterval(frame, 50);
  function frame() {
    if (width >= 30) {
      clearInterval(id);
    } else {
    width++; 
    elem4.style.width = width + '%'; 
    elem4.innerHTML = width * 1  + '%';
   }
  }
 }
function sql() {
  var elem5 = document.getElementById("barthree");   
  var width = 0;
  var id = setInterval(frame, 50);
  function frame() {
    if (width >= 30) {
      clearInterval(id);
    } else {
      width++; 
      elem5.style.width = width + '%'; 
      elem5.innerHTML = width * 1  + '%';
    }
   }
  }

那很好，并且效果很好，但是我正在尝试为div和加载条的百分比创建一个数组

我已经尝试过几次以缩短这段代码，但实际上我陷入了困境。我认为这是最接近答案的答案：

var skillBar = ["barone","bartwo","barthree"];
var percentBar = [20, 30, 30];

function skill() {
  for (var j = 0; j < skillBar.length; j++) {
    var elem = document.getElementById(skillBar[j]);   
    console.log(skillBar[j]);
    console.log(percentBar[j]);
    var width = 0;
    var id = setInterval(frame, 50);
    function frame() {
      console.log(percentBar[j])  <--- This return undefined
      if (width >= percentBar[j]) {
        clearInterval(id);
      } else {
        width++; 
        elem.style.width = width + '%'; 
        elem.innerHTML = width * 1  + '%';
      }    
    }
  }
}

但这不起作用。前两个console.log工作正常。它返回两个数组中的值，但是第三个返回未定义的值，因此加载栏永远不会结束。最糟糕的是，它只会影响最后一个小节。第一和第二个不会加载。

我知道对于大多数人来说这很明显，但是我需要一点帮助以使事情正常进行。

P.S：对不起，我的英语，那不是我的母语。

Answer 1

我认为您需要将fram功能带到功能技能之外

var skillBar = ["barone","bartwo","barthree"];
var percentBar = [20, 30, 30];
var id;
function frame(j) {
      console.log(percentBar[j]) 
      if (width >= percentBar[j]) {
        clearInterval(id);
      } else {
        width++; 
        elem.style.width = width + '%'; 
        elem.innerHTML = width * 1  + '%';
      }    
    }
    
function skill() {
  for (var j = 0; j < skillBar.length; j++) {
    var elem = document.getElementById(skillBar[j]);   
    console.log(skillBar[j]);
    console.log(percentBar[j]);
    var width = 0;
    id = setInterval(frame(j), 50);
    
  }
}  
skill()

<div id="barone"></div>
<div id="bartwo"></div>
<div id="barthree"></div>

我如何使用数组仅获取一个函数而不是3个相同的函数

1 个答案: