Jquery / JavaScript bootstrap Switchery clearInterval不起作用

Posted 2021-05-06

我的网站上有一个bootstrap openshery：

<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>

我想实现这个目标：

1. 在页面加载外部页面加载到“tableHolder”div。
2. Switchery默认关闭。
3. 当您单击切换时，加载相同的外部页面，但每隔5秒刷新一次div。
4. 如果关闭切换功能，则仅显示加载外部页面，无刷新间隔。

我有麻烦，因为一切正常，但当我按下开关关闭时，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>

答案

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

$(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附加一些文本，并在开关关闭时停止追加。如果您将“点击”事件更改为“更改”事件，即使关闭开关，文字追加也会继续