时间戳

首页 > 解决方案 > 如何将 for 循环的计数器传递给 for 循环中的函数

javascript - 如何将 for 循环的计数器传递给 for 循环中的函数

问题描述

我正在尝试使用 for 循环初始化一堆 jquery 函数。我在每次迭代中使用 for 循环的计数器来调用表中一行的函数。

但它不起作用。我认为这是因为函数中不存在计数器。这是因为我已经尝试运行我的函数，对计数器应该在的位置进行硬编码，比如 0，并且我的函数在我的表的第 0 行上按预期工作。当我将计数器留在原位时，它会抛出一个错误，说我通过 Id 获得的 html 元素为空。

有什么我想念的吗？如何将计数器传递给javascript中的函数？

这是我的代码：


  var typingTimer;                //timer identifier
  var doneTypingInterval = 400;  //time in ms (5 seconds)

var i

for (i = 0; i < 10; i++) {
  //on keyup, start the countdown
  $('#precios-'.concat(i,'-precio')).keyup(function(i){
      clearTimeout(typingTimer);
      if (document.getElementById('precios-'.concat(i,'-precio')).value) {
          typingTimer = setTimeout(doneTyping, doneTypingInterval);
      }
  });

  //user is "finished typing," do something
  function doneTyping(i) {
          var it = i
          $.getJSON('./_revisarCaptura', {
            unidades: $($($('#precios-'.concat(it,'-precio')).parents()[1]).siblings()[6]).html(),
            ultimoPrecio: $($($('#precios-'.concat(it,'-precio')).parents()[1]).siblings()[7]).html().substring(1),
            nuevoPrecio: document.getElementById('precios-'.concat(it,'-precio')).value,
            nuevasUnidades: document.getElementById('precios-'.concat(it,'-precio')).value,
          }, function(data) {

            $('#precios-'.concat(it,'-precio')).css('backgroundColor', data.result)
  })
  return false
}

i++

}

标签： javascriptflaskjinja2

解决方案

您的代码有两个问题：

  1. keyup和doneTyping()函数声明i为参数。他们将变量隐藏i在循环之外。keyup函数接收事件keyup作为i代替。
  2. i不会为循环的每次迭代捕获。到回调被调用时，i将设置为 10 而不是循环计数器。

下面的代码解决了这个问题。

var typingTimer;                //timer identifier
var doneTypingInterval = 400;   //time in ms (5 seconds)
// This i is changed by the loop.
// By the time doneTyping() is called, i will be 10.
var i;
for (i = 0; i < 10; i++) {
    // let/const keeps the variable scoped within the loop
    const id = `precios-${i}-precio`;
    const selector = `#${id}`;

    // This is also known as debounce
    $(selector).keyup(function(/* remove i */){
        clearTimeout(typingTimer);
        if (document.getElementById(id).value) {
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        }
    });

    function doneTyping(/* remove i */) {
        $.getJSON('./_revisarCaptura', {
            unidades: $($($(selector).parents()[1]).siblings()[6]).html(),
            ultimoPrecio: $($($(selector).parents()[1]).siblings()[7]).html().substring(1),
            nuevoPrecio: document.getElementById(id).value,
            nuevasUnidades: document.getElementById(id).value,
        }, function(data) {
            $(selector).css('backgroundColor', data.result)
        });
        return false; // Do you need this?
    }
}

另请参阅let与var.

推荐阅读