SetInterval in for循环仅在上次执行

时间:2015-07-09 14:55:29

标签: javascript jquery html

我在javascript中的SetInterval有点问题。我有一个组件,可以将内容从url加载到div。问题在于未定义的这些组件数量。

每个都有个人网址和重新加载时间。

问题是我的setinterval只会执行 for循环中的最后一个组件。

我需要自己重新加载每个组件。 : 组件n1 =重载时间5s 组件n2 =重新加载时间60秒。



$(document).ready(function() {

  var pocet = $('[id^=komponenta]').length;
  var i;

  for (i = 0, text = ""; i < pocet; i++) {

    var nazev = 'komponenta' + i;
    var cil = 'target' + i;
    var adresa = document.getElementById(nazev).adresa.value;
    var cas = document.getElementById(nazev).reload.value;

    setInterval(function() {
      $('#' + cil).load(adresa);
    }, cas);

  }

});
&#13;
<div id="target0"></div>
<div id="target1"></div>
<div id="target2"></div>


<form class="pure-form pure-form-stacked" method="POST" id="komponenta0">
  <fieldset>

    <label for="email">Komponenta:</label>

    <label for="remember" class="pure-checkbox">
    </label>
    <input type="hidden" name="adresa" id="adresa" type="text" placeholder="Vložte prosím URL" value="text.html">
    <input type="hidden" name="reload" value="10000">

  </fieldset>
</form>

<form class="pure-form pure-form-stacked" method="POST" id="komponenta1">
  <fieldset>

    <label for="email">Komponenta:</label>


    <label for="remember" class="pure-checkbox">
    </label>
    <input type="hidden" name="adresa" id="adresa" type="text" placeholder="Vložte prosím URL" value="text2.html">
    <input type="hidden" name="reload" value="2000">
  </fieldset>
</form>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

试试这个

(function(CIL, ADRESA, CAS) {
  setInterval(function() {
    $('#' + CIL).load(ADRESA);
  }, CAS);
}(cil, adresa, cas));    

i,e,将你的setInterval包装成上面的

这也有效,但可能不太明显

(function(cil, adresa, cas) {
  setInterval(function() {
    $('#' + cil).load(adresa);
  }, cas);
}(cil, adresa, cas));    

P.S。正如@fuyushimoya所说 - 这是一个范围问题

答案 1 :(得分:0)

正如其他人所提到的那样,它是一个范围问题 - 你的setInterval-ed函数不是在循环迭代时被调用,而是在它经过之后调用,并且只有最新的变量可用。

试试这个jsFiddle - 我替换了你的'#()&#39;具有记录功能。

$(document).ready(function () {
    log('loaded');
    var pocet = $('[id^=komponenta]').length;
    var i;

    for (i = 0, text = ""; i < pocet; i++) {
        log(i);

        (function (j) {
            var nazev = 'komponenta' + j;
            var cil = 'target' + j;
            var adresa = document.getElementById(nazev).adresa.value;
            var cas = document.getElementById(nazev).reload.value;
            setInterval(function () {
                log(nazev);
            }, cas);
        }(i));
    }

});

function log(msg) {
    $('.log').append(msg + '<br/>');
}