组合两个共享相似属性的 for 循环答案

【问题标题】：Combining two for-loops that share similar properties组合两个共享相似属性的 for 循环
【发布时间】：2015-08-04 22:24:42
【问题描述】：

我有两个 div，它们用数字表示窗口屏幕的宽度和高度，从每 100 个像素开始计数。数值被包裹在 span 标签内，并通过两个循环插入到它们各自的 div 容器中。由于这两个循环共享几乎相同的确切方法和条件逻辑，我想知道是否有一种方法可以以某种方式组合它们：

HTML

<div class="rule rule--horizontal"></div>
<div class="rule rule--vertical"></div>

document.addEventListener("DOMContentLoaded", function() {
  var horizontal = document.getElementsByClassName("rule--horizontal")[0],
      vertical   = document.getElementsByClassName("rule--vertical")[0];

  for (var i = 50, screenWidth = screen.width; i < screenWidth; i+= 50) {
    if (i % 100 === 0) {
      horizontal.innerHTML += "<span class='num num--visible'>" + i + "</span>";
    }
  }

  for (var i = 50, screenHeight = screen.height; i < screenHeight; i+= 50) {
    if (i % 100 === 0) {
      vertical.innerHTML += "<span class='num num--visible'>" + i + "</span>";
    }
  }
});

JSFiddle

【问题讨论】：

标签： javascript loops dom conditional

【解决方案1】：

您可以创建函数并在两个地方使用它：

document.addEventListener("DOMContentLoaded", function() {
  var horizontal = document.getElementsByClassName("rule--horizontal")[0],
      vertical   = document.getElementsByClassName("rule--vertical")[0];
  loop(horizontal, screen.width);
  loop(vertical, screen.height);

});
function loop(element, max) {
  for (var i = 50; i < max; i+= 50) {
    if (i % 100 === 0) {
      element.innerHTML += "<span class='num num--visible'>" + i + "</span>";
    }
  }
}

【讨论】：

@ScottHunter 你不需要两个索引变量。
@ScottHunter 你不需要两个索引变量。
@ScottHunter 我认为您是对答案投反对票的人。不是特别的问题，但你现在发现它错了吗？似乎他在发帖 30 多岁后没有机会修改答案。
@jcubic 假设这不会循环两次吗？
@CarlEdwards：不只是假设 :) 但它只写一次；最初的问题并不清楚这是否可以接受。

【解决方案2】：

这会产生相同的结果

document.addEventListener("DOMContentLoaded", function() {
    var horizontal = document.getElementsByClassName("rule--horizontal")[0],
        vertical   = document.getElementsByClassName("rule--vertical")[0];
    var a = screen.width > screen.height ? screen.width : screen.height;
    for (var i = 50; i < a; i+= 50) {
        if (i % 100 === 0) {
            if(i < screen.width)horizontal.innerHTML += "<span class='num num--visible'>" + i + "</span>";
            if(i < screen.height)vertical.innerHTML += "<span class='num num--visible'>" + i + "</span>";
        }
    }
});

【讨论】：

【解决方案3】：

如果 (i % 100 === 0) this is true on 100, 200 等，您可以将 if 语句分解出来。只需从 100 开始 i 并递增 100

document.addEventListener("DOMContentLoaded", function() {
   var horizontal = document.getElementsByClassName("rule--horizontal")[0],
       vertical   = document.getElementsByClassName("rule--vertical")[0];

   var createDivs = function (axis, maxSize) {
       for (var i = 100; i < maxSize; i += 100) {
           axis.innerHTML += "<span class='num num--visible'>" + i + "</span>";
       }
   };

   createDivs(horizontal, screen.width);
   createDivs(vertical, screen.height);
});

【讨论】：