单击鼠标时如何停止重复功能?

时间:2012-08-29 06:46:53

标签: javascript jquery

我真的可以使用一些帮助。我在下面有一个javascript / jquery滑块,一遍又一遍地重复。如果可能的话,我希望它在单击特定按钮时停止重复。我是一个完整的新手,它需要很多才能达到这一点!任何帮助将不胜感激。

$(document).ready(function () {

    var i = 0;
    var z = 0;
    delay = 5000;
    var el = $('#scroll-script');
    var ql = $('#info-box');
    var classesb = ['fp-info-one', 'fp-info-two', 'fp-info-three', 'fp-info-four'];
    var classes = ['fp-slide-one', 'fp-slide-two', 'fp-slide-three', 'fp-slide-four'];
    var interval = setInterval(function () {
        el.removeClass().addClass(classes[i]);
        i = (i + 1) % 4;
        ql.removeClass().addClass(classesb[z]);
        z = (z + 1) % 4;
    }, delay);

});

4 个答案:

答案 0 :(得分:2)

$(document).ready(function () {

    var i = 0;
    var z = 0;
    delay = 5000;
    var el = $('#scroll-script');
    var ql = $('#info-box');
    var classesb = ['fp-info-one', 'fp-info-two', 'fp-info-three', 'fp-info-four'];
    var classes = ['fp-slide-one', 'fp-slide-two', 'fp-slide-three', 'fp-slide-four'];
    var interval = setInterval(function () {
        el.removeClass().addClass(classes[i]);
        i = (i + 1) % 4;
        ql.removeClass().addClass(classesb[z]);
        z = (z + 1) % 4;
    }, delay);

    // code that stop repeat
    $('#your_button').on('click', function() {
      clearInterval(interval );
    });
});

因为,您正在使用setInterval()来重复时间,因此要清除该计时器,您需要使用 clearInterval().

注意

#your_button将替换为目标按钮的适当选择器。

答案 1 :(得分:1)

您只需要使用clearInterval():

$(".somebutton").click(function()
{
  clearInteval(interval);
  interval=null;
});

答案 2 :(得分:0)

我认为clearInterval()可以帮助您实现这一目标。

只需在click()事件中应用此功能即可。 类似的东西:

$('#element').click(function(){
    clearInterval(Interval_OBJECT);
});

答案 3 :(得分:0)

如果要停止重复操作,请使用clearInterval(interval)

类似的东西:

 $('#btn').on('click', function(){ clearInterval(interval); });