Issue with clearInterval

Issue with clearInterval

本文关键字：clearInterval with Issue      更新时间：2023-09-26

我正在尝试创建一个滑块，其中幻灯片或来自ajax。其中，将鼠标悬停在滑动条上，div将停止滑动条。为此，我创建了一个函数sliderPopulateBlocks()，它对服务页面进行调用把幻灯片放到容器中我调用了移动幻灯片的函数使用了一个函数moveItems()，该函数使用setInterval()在间隔上调用。

问题是在div的悬停上停止幻灯片，我正在使用clearInterval()清除间隔。在文档准备就绪时首先调用它可以很好地工作。但是当在类别点击上调用相同的函数时，在第二次点击后滑动条不会停止悬停。

<script>
var interval_two;
function sliderPopulateBlocks(){
    $.ajax({
        type:"get",
        url:"service.php",
        data:{t:"slider"},
        dataType:"json",
        success:function(data,status){
            if(status == "success"){
                if(data.status == "ok"){                    
                    var data_arr = data.details;
                    var final_html = '';
                    $.each(data_arr, function(index,value){
                        var returned_html = '<div class="popular-column"></div>';
                        final_html = final_html + returned_html;
                    });
                    var container = $("#popular-two");
                    container.html(final_html);
                } else {
                }
            }
        },
        error: function(){
            //show the error
        },
        complete: function(){           
            if( total_slides_two > max_item ){
                moveItems("#popular-two");
                interval_two = setInterval(function(){moveItems("#popular-two")}, 5000);                
                $(".popular-two").mouseover(function(){
                    clearInterval(interval_two);
                });
                $(".popular-two").mouseleave(function(){
                    interval_two = setInterval(function(){moveItems("#popular-two")}, 5000);
                });
            }
        }
    });
}
$(function(){
    sliderPopulateBlocks();
    $(".category-list ul li").click(function(){
        sliderPopulateBlocks();
    });
});
</script>
<!-- html -->
<div class="scroll-div popular-one">
    <a id="prev-popular-one" href="javascript:void(0);" class="previous-bt">Previous</a>
    <a id="next-popular-one" href="javascript:void(0);" class="next-bt">Next</a>
    <div class="scroll-con">
        <div class="popular-details" id="popular-one">  <!--popular-details start-->

        </div>  <!--popular-details end-->
    </div>
</div>

当您使用ajax动态添加内容时，请使用on并将events绑定在文档ready中，而不是在ajax调用中，如下所示:

interval_two = interval_two = setInterval(function() {
    moveItems("#popular-two");
}, 5000);
$('"#popular-two"').on('mouseenter', '.popular-two', function() {
    clearInterval(interval_two);
}).on('mouseleave', '.popular-two', function() {
    interval_two = setInterval(function() {
        moveItems("#popular-two");
    }, 5000);
});

setInterval()返回所创建区间的ID。clearInterval()使用您传递给它的ID清除间隔

可能发生的情况是设置了多个间隔，但是interval_two将只保存最后一个间隔的ID，这意味着所有其他间隔将继续运行。

不保存interval_two = setInterval()，将ID添加到数组中:

var interval_two = [];
interval_two.push(setInterval());

然后清除循环中的间隔:

function clearIntervals(interval_two) {
    for(var i = 0, len = interval_two.length; i < len; i++) {
        clearInterval(interval_two[i]);
    }
}

每次调用AJAX时，都在向.popular-two添加一个新的mouseover事件处理程序。这意味着它第一次运行时，有一个，第二次，有两个，以此类推。

这将产生创建多个间隔的效果，只有最近创建的一个被存储为interval_two。

您可以通过将mouseover和mouseout移出AJAX调用来修复这个问题。

var interval_two
function sliderPopulateBlocks(){
  $.ajax({
      // code not relevant to the answer omitted here
      complete: function(){           
          if( total_slides_two > max_item ){
              moveItems("#popular-two");
              interval_two = setInterval(function(){moveItems("#popular-two")}, 5000);                
          }
      }
  });
}
// move event handlers outside of AJAX to ensure they only get assigned once. 
$(".popular-two").mouseover(function(){
  clearInterval(interval_two);
});
$(".popular-two").mouseleave(function(){
  interval_two = setInterval(function(){moveItems("#popular-two")}, 5000);
});
相关文章：