Возвращение значения из функции внутри цикла for

Question

Я хочу запустить цикл for, который добавляет каждое сотое числовое значение ширины экрана в div. Это работает:

for (var i = 50, numbers = ""; i < limit; i+= 50) { 
    if (num % 100 === 0) { 
    numbers += i; 
    } 
} 

document.getElementsByClassName("width")[0].innerHTML = numbers; 

Но когда я пытаюсь вызвать функцию в цикле он не делает:

for (var i = 50, numbers = ""; i < limit; i+= 50) { 
    insertVal(i, numbers); 
} 

document.getElementsByClassName("width")[0].innerHTML = numbers; 

function insertVal(i, container) { 
    if (i % 100 === 0) { 
    container += i; 
    } 
} 

Я не уверен, что возвращаемое значение должно быть так, что числовые значения вставляемый в div.

JSFiddle

Answer 1

Вы должны набор numbers в петле, и вы должны B возвращение container от вашей функции,

for (var i = 50, numbers = ""; i < limit; i += 50) { 
    numbers = insertVal(i, numbers); // A 
} 

document.getElementsByClassName("width")[0].innerHTML = numbers; 

function insertVal(i, container) { 
    if (i % 100 === 0) { 
     container += i; 
    } 
    return container; // B 
} 

Однако, это менее эффективно, чем ваш рабочий цикл, поскольку каждый вызов функции дорог

---

Способ, которым вы проходите numbers, в этом случае может возникнуть путаница, если вы когда-нибудь вернетесь к этому коду позднее. Если необходимо использовать функцию здесь, вы можете рассмотреть один из этих двух шаблонов коды вместо

испытания, как это собственный метод дает Boolean (эквивалент) значения, так что вы знаете, входы были хорошо

function test(i) { 
    return i % 100; 
} 

for (var i = 50, numbers = ""; i < limit; i += 50) { 
    if (test(i)) 
     numbers += i; 
} 

document.getElementsByClassName("width")[0].innerHTML = numbers; 

Тест дает результат, который может быть преобразованием на вход, который вас интересует, или ожидаемый неправильный результат, например null

function test(i) { 
    if (i % 100) 
     return i; 
    return null; 
} 

for (var i = 50, numbers = "", e; i < limit; i += 50) { 
    e = test(i); 
    if (e !== null) 
     numbers += e; 
} 

document.getElementsByClassName("width")[0].innerHTML = numbers; 

---

@CarlEdwards дедупликации является приемлемой причиной, чтобы написать функции для них. Однако, если цикл почти точно так же учитывать, если вы можете переместить for себя в петлю слишком

Рассмотрим следующий пример, где петля находится внутри функции my_loop означает, что вы можете повторно использовать код, но только применение функция дважды

function my_loop(i, j) { 
    for (var numbers = ""; i < j; i+= 50) { 
     if (i % 100 === 0) { 
      numbers += i; 
     } 
    } 
    return numbers; 
} 

document.getElementsByClassName("width")[0].innerHTML = my_loop(50, limit); 
document.getElementsByClassName("width")[1].innerHTML = my_loop(250, limit2); 

Answer 2

Возвращение container из вашей функции, и передать его обратно вокруг.

https://jsfiddle.net/un9uj7nb/5/

for (var i = 50, numbers = ""; i < limit; i+= 50) { 
    numbers = insertVal(i, numbers); 
} 

document.getElementsByClassName("width")[0].innerHTML = numbers; 

function insertVal(i, container) { 
    if (i % 100 === 0) { 
     container += i; 
    } 
    return container; 
}