Question

我正在尝试创建幻灯片或来自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>

Answer 1

当您使用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);
});

Answer 2

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]);
    }
}

Answer 3

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

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

您可以通过移动AJAX调用之外的mouseover和mouseout来解决此问题。

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);
});

clearInterval问题

3 个答案: