0

我有同样的问题： 如何停止“setInterval”

但是当我在 setInterval 中有负载时它不起作用，这就是 test.php 里面的内容：

<div id="refresh">
<textarea></textarea>
</div>


<script src="jquery.js"></script>
<script>
$(function () {
  var timerId = 0;

  $('textarea').focus(function () {
    clearInterval(timerId);
  });

  $('textarea').blur(function () {
    timerId = setInterval(function () {
     $('#refresh').load('test.php #refresh');
    }, 1000);
  });
});
</script>
4

1 回答 1

2

问题是您的load调用破坏并重新创建了textarea，并且没有将事件处理程序附加到新的textarea. 您附加的处理程序只会附加到原始处理程序，而不是新的替换。

你可以通过事件委托来解决这个问题，因为 jQuery 确保blur并focus冒泡（即使它们并非在所有浏览器上都原生冒泡）；

$(function () {
  var timerId = 0;

  $('#refresh').on('focus', 'textarea', function () {
    clearInterval(timerId);
  });

  $('#refresh').on('blur', 'textarea', function () {
    timerId = setInterval(function () {
     $('#refresh').load('test.php #refresh');
    }, 1000);
  });
});

这会钩住#refresh元素上的事件，但仅当事件源自它的后代textarea时才会触发处理程序。

refresh或者因为没有理由反复查找：

$(function () {
  var timerId = 0,
      refresh = $("#refresh");

  refresh.on('focus', 'textarea', function () {
    clearInterval(timerId);
  });

  refresh.on('blur', 'textarea', function () {
    timerId = setInterval(function () {
     refresh.load('test.php #refresh');
    }, 1000);
  });
});

请注意，更改还意味着仅获取事件中的textarea元素，而使用您的原始代码，页面上的所有元素都得到了它。#refresh div textarea

于 2013-02-21T07:10:21.430 回答