javascript - clearInterval 的问题

Question

我正在尝试创建一个 slider ，其中的幻灯片或来自ajax。将鼠标悬停在 slider div 上会停止 slider 。为此，我创建了一个函数 sliderPopulateBlocks() ，它调用服务页面将幻灯片放入容器中，称为移动幻灯片的函数，因为我有使用了 moveItems() 函数，该函数使用 setInterval() 按时间间隔调用。

问题是在div悬停时停止幻灯片，我正在使用clearInterval()清除间隔。在文档准备好后首次调用时它工作正常。但是，当在类别单击上调用相同的函数时，第二次单击后 slider 不会在悬停时停止。

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

Answer 1

当您使用ajax动态添加内容时，请使用on并绑定(bind)文档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);
});