Question

我有一个div，其中包含一个每隔X秒更新div的javascript，但是当我用另一个上下文替换div的内容时，我希望javascript停止，因为它返回旧内容并覆盖当前内容。如何在这些条件下让javascript停止？

 <li><%= link_to "Run task", { :controller => "tasks_runner", :action => "task_form"}, {:remote => TRUE} %></li>
 <li><%= link_to "Monitor tasks", { :controller => "tasks_runner", :action => "monitor_tasks"}, {:remote => TRUE} %></li>

 <div class="content-module-main" id='task_runner_content'> </div>

每个链接都会更新div的内容。我的问题是，秒链接用表内容和更新表的脚本更新div（更新task_runner_content内容），当我点击第一个链接时，在X秒后，内容被秒链接的内容覆盖因为JavaScript。

更新脚本：

<script>
$(function() {
$(window).ready(function() {
  setTimeout(function() {
    jQuery.ajax({
      url: "/tasks_runner/monitor_tasks",
      type: "GET",
      dataType: "script"
    });
  }, 3000); //in 3 seconds from now 
});
});
</script>

Answer 1

如果您正在使用setInterval或setTimeout来更新内容（听起来像是这样），您只需清除更改上下文的函数中的计时器，如下所示：

function update(){
    $('somediv').html('some value');
}

var _timer = setInterval(update, 1000);

function replaceContext(){
    $('somediv').html('new context');
    clearInterval(_timer);
}

Answer 2

我假设您必须使用setInterval来替换div的内容。

X = 3000 //number of miliseconds of your interval
I = setInterval(function(){
     console.log("updating div");
}, X);

解决方案是在执行其他操作时停止间隔I。您可以按如下方式使用clearInterval：

clearInterval(I);

Answer 3

            <div id="d1">1</div>
        <div id="d2">div 2 content</div>

        <button type="button" id="change">Click to change the content</button>

        <script>

            var t=1;
            var timer=setInterval(function()

            {
                $("#d1").html(t);
                t++;

            },1000)

            $("#change").click(function()
            {

                window.clearInterval(timer)
                $("#d1").html($("#d2").html());

            });



        </script>

如果未显示内容，请停止执行javascript

3 个答案: