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);
  });
});

この変更はget イベント内のtextarea要素のみを意味することにも注意してください。元のコードでは、ページ上のすべての要素がそれを取得していました。#refresh div textarea

于 2013-02-21T07:10:21.430 に答える