Question

我有一些内容可以使用该Id上的ajax进行更新，例如，假设我有一个完整的主页，并且在body里面我有这个代码：

<div id="content">
<button onclick="update1()"></button>
<button onclick="update2()"></button>
</div>

    <script>
         function update1(){
                    $.ajax({
                   url:"Page1/index.html",
                   type:'GET',
                   success: function(data){
                       $('#content').html((data));
                   }
                });
         }
             function update2(){
                    $.ajax({
                   url:"Page2/index.html",
                   type:'GET',
                   success: function(data){
                       $('#content').html((data));
                   }
                });
         }
    </script>
<script src="js/script.js"></script>

Page1 的index.html包含以下代码：

<button onclick="update1()"></button>
<button onclick="update2()"></button>
<div id="page1"> .....</div>

Page2 的index.html包含以下代码：

<button onclick="update1()"></button>
<button onclick="update2()"></button>
<div id="page2"> .....</div>

script.js包含一些代码：

$(document).ready(
            function() {
                setInterval(function() {

                        $.ajax({
                            url: "someapi",
                            type: "POST",
                            dataType: "json",
                            success: function (result) {  
                                console.log(result)
                           } 
                        });

                }, 2000);
            });

我想要做的是当按下按钮调用从 Page1 获取index.html的Ajax并将其放入id内容时，仅运行script.js此脚本当id page1 存在时执行，我从this answer找到了这个技巧，通过使用带有jQuery的if例如if($('#page1').length ){my sj code} javascript代码运行只有当该ID存在时，但不幸的是，当我点击该按钮以获得 Page2 ，其中包含另一个ID page2 时代码仍在运行，是否存在在更新div时停止此js代码的方法???

Answer 1

该功能没有停止，因为除非您使用clearInterval()功能将其清除，否则间隔不会停止触发。

将所有JS代码放在一个文件中：

$(document).ready(function() {
var the_interval = setInterval(function() {

    $.ajax({
        url: "someapi",
        type: "POST",
        dataType: "json",
        success: function (result) {
            console.log(result)
        }
    });

}, 2000);

function stopTheInterval(){
    clearInterval(the_interval);
}

function update1(){
    $.ajax({
        url:"Page1/index.html",
        type:'GET',
        success: function(data){
            $('#content').html((data));
        }
    });
}

function update2(){
    $.ajax({
        url:"Page2/index.html",
        type:'GET',
        success: function(data){
            $('#content').html((data));
            stopTheInterval(); // we stop the first interval
        }
    });
}});

我在这里做的是保存变量中的区间号，并创建一个新函数来清除它。接下来，我所做的只是将我的新函数放在你的update2（）函数中，所以一旦我得到数据，我就清除间隔并停止重复函数。

Answer 2

的script.js
不要使用setInterval。

function some_function(){ 
  $.ajax({
      url: "someapi",
      type: "POST",
      dataType: "json",
      success: function (result) {  
          console.log(result)
     } 
  });  
}

并在update1中调用上面的函数。因为只有在第1页更新时才需要它

<script>
  function update1(){
    $.ajax({
      url:"Page1/index.html",
      type:'GET',
      success: function(data){
        $('#content').html((data));
        some_function()       // call function here
      }
    });
  }

function update2(){
  $.ajax({
    url:"Page2/index.html",
    type:'GET',
    success: function(data){
      $('#content').html((data));
    }
  });
}
</script>

Answer 3

尝试使用update1().stop() 在update2函数的开始

即使在更新DIV之后，Javascript函数也会继续执行

3 个答案: