Question

我正在尝试使用java脚本刷新div。 setInterval（）和clearInterval（），它的工作正常，但我想在单击停止按钮时停止单个div的刷新过程..明确间隔不工作

<script type ="text/javascript">
        $(document).ready(function () {
            $('.output').click(function () {
                var id = $(this).closest('.g').attr('id');

                Go(id);

            })
            $('.bt').click(function () {
           var id = $(this).closest('.g').attr('id');
                stop(id)
            });

            function Go(id) {
                id = setInterval(function () {
                    Chat_msg('Ch04', id, u)
                }, 3000);
            };
            function stop(id) {

                clearInterval(id);

            }

        })

    </script>
</head>

<body>
<div id="a" class='g'>
    <div class="output"></div>
    <input id="Button1" type="button" value="stop" class="bt" />
</div>

<div id="b">
    <div class="output"></div>
    <input id="Button2" type="button" value="stop"  class="bt"/>
</div>

<div id="c">
     <div class="output"></div>
    <input id="Button3" type="button" value="stop" class="bt" />
</div>


</body>
</html>

Answer 1

为您的间隔使用全局变量。

var interv = null;

interv = setInterval(function { ... }, 5000);

$('#btn').on('click', function(){
    if (interv) clearInterval(intev);
})

Answer 2

与setInterval关联的引用可能不属于停止按钮处理程序的范围。

$("#start").on("click", function(){
  var interv = setInterval(function(){ /*...*/ }, 1000);
});

$("#stop").on("click", function(){
  clearInterval(interv);
});

在上面的代码中，我们的interv变量不在我们的#stop按钮处理程序的范围内。我们可以通过将其提升到另一个级别来改变这一点：

var interv;

$("#start").on("click", function(){
  interv = setInterval(function(){ /*...*/ }, 1000);
});

$("#stop").on("click", function(){
  clearInterval(interv);
});

现在两个处理程序都可以访问interv变量。

Answer 3

我过去对此的看法是使用一个使用设置超时来调用自身的函数。

var stop = false
function caller  () {
  if (stop === true){
    //do something
    setTimeout(caller() , 1000);
  }
  else{
    //do something after button has  been click and stop is set to true
  }
}

Answer 4

看起来像是一个范围问题的组合，并且可以使用带有id响应值的setInterval DOM属性互换。

<script type ="text/javascript">
    $(document).ready(function () {
        var timeouts = {};

        $('.output').click(function () {
            var id = $(this).closest('.g').attr('id');
            go(id);
        });

        $('.bt').click(function () {
            var id = $(this).closest('.g').attr('id');
            stop(id);
        });

        function go(id) {
            timeouts[id] = setInterval(function () {
                Chat_msg('Ch04', id, u)
            }, 3000);
        }

        function stop(id) {
            clearInterval(timeouts[id]);
        }
    });
</script>

单击停止按钮后，clearInterval（）不起作用

4 个答案: