在执行AJAX请求之后，如何使用另一个setInterval替换DOM中的setInterval，如何停止setInterval？ [英] How can I stop a setInterval to run after executing a AJAX request that replaces that setInterval in the DOM with another setInterval?

问题描述

我正在使用jQuery，并且在执行AJAX请求时停止工作 setInterval 有一些麻烦，返回的代码包含相同的的setInterval 。那就是：

鉴于我有以下代码：

  ; div id =test_css_id> 
< a id =link_css_idhref =test_url.html> LINK< / a> 
 
< script type =text / javascript> 
 $（'＃link_css_id'）。click（function（event）{
 event.preventDefault（）; 
 
 $ .ajax（{
 url：$这个）.attr（'href'），
类型：'PUT'，
 success：function（data）{
 $（'＃test_css_id'）replaceWith（data）; //将所有代码（包括JavaScript）替换为响应数据（注意：响应数据与此处显示的代码完全相同）
} 
}）; 
}）; 
 
 $（document）.ready（function（）{
 var refreshTimer; 
 
 function refreshFunction（）{
 $ .ajax（{
 url：'test_url.html'，
 type：'GET'，
 success：function（data）{
 $（'＃test_css_id'）replaceWith（data）; //将所有代码（包括JavaScript）替换为响应数据（注意：响应数据与此处显示的代码完全相同）
}，
完成：function（data）{
 clearInterval（refreshTimer ）; //注意：这不会停止setInterval 
} 
}）; 
} 
 
 refreshTimer = setInterval（refreshFunction，1000）; //毫秒
}）; 
< / script> 
< / div> 
  

当点击函数中的AJAX请求运行成功，然后重新加载上述代码（ note ：中的数据 replaceWith 与上述代码相同，包括JavaScript）。但是， setInterval 不会overrode/停止，因此浏览器每次运行一次 setInterval 时间我点击了 LINK 。当 refreshFunction 运行时，不会发生这种情况。但是，根据先前点击 LINK 的数量，即使 refreshFunction 也会导致 setInterval 运行越来越多。

如何停止 setInterval 运行当AJAX请求成功时，只有一个 setInterval 运行？

解决方案

在执行更换之前，您需要清除计时器。为此，您需要在点击回调之间访问定时器变量。在这种情况下，我已经把计时器全局化了，但还有其他的方法可以做到，我会留给你的。

 < div id =test_css_id> 
< a id =link_css_idhref =test_url.html> LINK< / a> 
 
< script type =text / javascript> 
 var refreshTimer; // ********************计时器现在是全局
 $（'＃link_css_id'）。click（function（event）{
 event .preventDefault（）; 
 
 $ .ajax（{
 url：$（this）.attr（'href'），
 type：'PUT'，
成功：function（data）{
 // *************如果在替换代码之前存在，则清除间隔
 clearInterval（refreshTimer）; 
 $（ '#test_css_id'）replaceWith（data）; //将包含JavaScript的所有代码替换为响应数据（注意：响应数据与此处显示的代码完全相同）
} 
}） ; 
}）; 
 
 $（document）.ready（function（）{
 function refreshFunction（）{
 $ .ajax（{
 url：'test_url.html'，
类型：'GET'，
 success：function（data）{
 $（'＃test_css_id'）replaceWith（data）; //用包含JavaScript的所有代码替换响应数据：
}，
 complete：function（data）{
 clearInterval（refreshTimer）; //注意：这不会停止setInterval。
} 
}）; 
} 
 
 refreshTimer = setInterval（refreshFunction，1000）; // milliseconds 
}）; 
< / script> 
< / div> 
  

I am using jQuery and I have some trouble on stopping to work the setInterval when performing a AJAX request that returns the same code containing the same setInterval. That is:

Given I have the following code:

<div id="test_css_id">
  <a id="link_css_id" href="test_url.html">LINK</a>

  <script type="text/javascript">
    $('#link_css_id').click(function(event) {
      event.preventDefault();

      $.ajax({
        url:     $(this).attr('href'),
        type:    'PUT',
        success: function(data) {
          $('#test_css_id').replaceWith(data); // Replaces all code including JavaScript with the response data (note: the response data is exactly the same as the code shown here).
        }
      });
    });

    $(document).ready(function() {
      var refreshTimer;

      function refreshFunction(){
        $.ajax({
          url:     'test_url.html',
          type:    'GET',
          success: function(data) {
            $('#test_css_id').replaceWith(data); // Replaces all code including JavaScript with the response data (note: the response data is exactly the same as the code shown here).
          },
          complete: function(data) {
            clearInterval(refreshTimer); // Note: This'd not stop the setInterval.
          }
        });
      }

      refreshTimer = setInterval(refreshFunction, 1000); // milliseconds
    });
  </script>
</div>

When the AJAX request within the click function runs on success then the above code is reloaded (note: the rendered data in the replaceWith is exactly the same as the above code, including JavaScript). However the setInterval is not "overrode" / "stopped" and so the browser runs one more time that setInterval for each time I clicked theLINK. The same does not happen when the refreshFunction runs. However, depending on the amount of previous click on the LINK, even the refreshFunction causes the setInterval to run more and more.

How can I stop the setInterval to run when the AJAX request success so to have only one setInterval running?

解决方案

You will need to clear the timer right before you perform the replacement. For this, you'll need the timer variable to be accessible within the click callback as well. In this case, I have made the timer global, but there are other ways you can do it, I'll leave that up to you.

<div id="test_css_id">
  <a id="link_css_id" href="test_url.html">LINK</a>

  <script type="text/javascript">
    var refreshTimer;  //******************** Timer is now global
    $('#link_css_id').click(function(event) {
      event.preventDefault();

      $.ajax({
        url:     $(this).attr('href'),
        type:    'PUT',
        success: function(data) {
          //************* Clear interval if it exists before replacing code.
          clearInterval(refreshTimer);
          $('#test_css_id').replaceWith(data); // Replaces all code including JavaScript with the response data (note: the response data is exactly the same as the code shown here).
        }
      });
    });

    $(document).ready(function() {
      function refreshFunction(){
        $.ajax({
          url:     'test_url.html',
          type:    'GET',
          success: function(data) {
            $('#test_css_id').replaceWith(data); // Replaces all code including JavaScript with the response data (note: the response data is exactly the same as the code shown here).
          },
          complete: function(data) {
            clearInterval(refreshTimer); // Note: This'd not stop the setInterval.
          }
        });
      }

      refreshTimer = setInterval(refreshFunction, 1000); // milliseconds
    });
  </script>
</div>

这篇关于在执行AJAX请求之后，如何使用另一个setInterval替换DOM中的setInterval，如何停止setInterval？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！