Jquery / JavaScript boostrap Switchery clearInterval 不起作用答案

【问题标题】：Jquery / JavaScript boostrap Switchery clearInterval doesn't workJquery / JavaScript boostrap Switchery clearInterval 不起作用
【发布时间】：2023-04-02 18:15:01
【问题描述】：

我的网站上有一个 boostrap 开关：

<div class="form-group">
        <label class="checkbox-inline checkbox-right checkbox-switchery switchery-sm">
                <input type="checkbox" class="switchery" id="test55">
                    Live
        </label>                                
</div>
<div id="tableHolder"></div>

我想实现这个：

在页面加载时将外部页面加载到“tableHolder”div 中。
切换器默认关闭。
当您点击 switchery 时，加载相同的外部页面，但 div 每 5 秒刷新一次。
如果关闭 switchery，则只显示加载的外部页面，没有重新刷新间隔。

我遇到了麻烦，因为一切正常，但是当我按下 switchery 关闭时，div 仍然保持刷新，所以 clearInterval 不起作用:(

这是我的脚本：

<script type="text/javascript">
 $(document).ready(function () {
   $('#tableHolder').load('external.php?name=myId001')
   var documentInterval = 0;
   $('#test55').change(function () {

     if ($(this).prop("checked")) {

       documentInterval = setInterval(function () {
         $('#tableHolder').load('external.php?name=myId001')
       }, 3000);

     } else {

       clearInterval(documentInterval)
     }
   });
 });
</script>

【问题讨论】：

对我来说看起来不错。您是否尝试在更改处理程序中设置断点以检查它是否进入 else 分支？
嗯...如果我使用 $('#test55').change(function(){ if($(this).prop("checked")) { alert("live!" ); } else { alert("nooot!") } 它会同时触发两个警报？？

标签： javascript jquery checkbox switchery

【解决方案1】：

使用点击，而不是改变功能。

$(document).ready(function() {
    $('#tableHolder').load('external.php?name=myId001');
    var elem = document.querySelector('#test55');
    var init = new Switchery(elem);
    var documentInterval = 0;
    var clickCheckbox = document.querySelector('#test55');
    $(document).on('click', '#test55', function() {
        if ($(this).prop("checked")) {
        documentInterval = setInterval(function() {
            $('#tableHolder').load('external.php?name=myId001');}, 3000);
        } else {
          clearInterval(documentInterval);
        }
    });
});

Sample fiddle here 。这将在开关打开时将一些文本附加到 div，并在开关关闭时停止附加。如果您将 'click' 事件更改为 'change' 事件，即使开关关闭，文本附加也会继续

【讨论】：