如何清除调用自身javascript函数内的间隔

Question

我需要清除此示例中的功能间隔

$.fn.bounce = function(options) {

    var settings = $.extend({
        speed: 10
    }, options);

    return $(this).each(function() {

        var $this = $(this),
            $parent = $this.parent(),
            height = $parent.height(),
            width = $parent.width(),
            top = Math.floor(Math.random() * (height / 2)) + height / 4,
            left = Math.floor(Math.random() * (width / 2)) + width / 4,
            vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1),
            vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1);

        // place initialy in a random location
        $this.css({
            'top': top,
            'left': left
        }).data('vector', {
            'x': vectorX,
            'y': vectorY
        });

        var move = function($e) {

            var offset = $e.offset(),
                width = $e.width(),
                height = $e.height(),
                vector = $e.data('vector'),
                $parent = $e.parent();

            if (offset.left <= 0 && vector.x < 0) {
                vector.x = -1 * vector.x;
            }
            if ((offset.left + width) >= $parent.width()) {
                vector.x = -1 * vector.x;
            }
            if (offset.top <= 0 && vector.y < 0) {
                vector.y = -1 * vector.y;
            }
            if ((offset.top + height) >= $parent.height()) {
                vector.y = -1 * vector.y;
            }

            $e.css({
                'top': offset.top + vector.y + 'px',
                'left': offset.left + vector.x + 'px'
            }).data('vector', {
                'x': vector.x,
                'y': vector.y
            });

            setTimeout(function() {
                move($e);
            }, 50);

        };

        move($this);
    });

};

$(function() {
    $('#wrapper li').bounce({
        'speed': 7
    });
});

因此，每当我需要时，我都会启动动画圈，当我不想要时，我可以停下来。因此，在上面的代码中，您可以看到move($this);正在调用间隔，我需要停止或清除间隔，以便圆停止动画。当我再次需要时，我可以点击按钮再次开始动画。

Answer 1

我将bounce函数中的代码分为三部分：

1. 一个用于初始化，其中元素占据了他们的起始位置。
2. 动画逻辑的另一个（添加了开始和停止）
3. 最后一个用于移动（相同的函数move但不在each内定义它（不好，因为它将为每个元素重新定义），我在{{{ 1}}）。

该代码包含大量评论。如果发表评论后仍有不明确的地方。

＆＃13;
＆＃13;
each
＆＃13;
$.fn.bounce = function(options) {

    var settings = $.extend({
        speed: 10
    }, options);

    // Keep a reference to this to use when we are inside bounded functions (where this is something different)
    var that = this;
    
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////  LOGIC FOR INITIALIZATION  ///////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // function init to initialize the elements.
    function init(){
        $(that).each(function() {

            var $this = $(this),
                $parent = $this.parent(),
                height = $parent.height(),
                width = $parent.width(),
                top = Math.floor(Math.random() * (height / 2)) + height / 4,
                left = Math.floor(Math.random() * (width / 2)) + width / 4,
                vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1),
                vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1);

            // place initialy in a random location
            $this.css({
                'top': top,
                'left': left
            }).data('vector', {
                'x': vectorX,
                'y': vectorY
            });
        });
    }
    // call it right away (initialize) before starting anything else
    init();
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    
    
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////    LOGIC FOR  ANIMATION    ///////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // the boolean that will stop the animation
    var keepGoing = false;
    
    // If the selector for the start button is specified
    if(settings.start){
        // attach animate to its click event listener
        $(settings.start).on("click", animate);
    }
    else // no button is provided then start automatically
        animate();
    // If the selector for the stop button is specified
    if(settings.stop){
        // attach stop to its click event listener
        $(settings.stop).on("click", stop);
    }
    
    // the function that will start the animation
    function animate(){
        // If we are not already animating
        if(!keepGoing){
            keepGoing = true;
            // call move on all the elements to start the magic.
            // we use 'that' instead of 'this' here because 'this' is the button that have been clicked (see the event listener above=.
            $(that).each(function() {
                move($(this));
            });
        }
    }
    // the function that will stop the animation ...
    function stop(){
        // ... by simply set keepGoing to false
        keepGoing = false;
    }
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
    
    

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////     LOGIC FOR MOVEMENT     ///////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // the move function responsible for moving the elements
    function move($e) {

        var offset = $e.offset(),
            width = $e.width(),
            height = $e.height(),
            vector = $e.data('vector'),
            $parent = $e.parent();

        if (offset.left <= 0 && vector.x < 0) {
            vector.x = -1 * vector.x;
        }
        if ((offset.left + width) >= $parent.width()) {
            vector.x = -1 * vector.x;
        }
        if (offset.top <= 0 && vector.y < 0) {
            vector.y = -1 * vector.y;
        }
        if ((offset.top + height) >= $parent.height()) {
            vector.y = -1 * vector.y;
        }

        $e.css({
            'top': offset.top + vector.y + 'px',
            'left': offset.left + vector.x + 'px'
        }).data('vector', {
            'x': vector.x,
            'y': vector.y
        });

        // if keep going, ... you know, keep going.
        if(keepGoing){
            setTimeout(function() {
                move($e);
            }, 50);
        }
    }
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
}

// the options can have the 'start' and 'stop' selector optionally.
$(function() {
    $('#wrapper li').bounce({
        'speed': 7,
        'start': '#startAnimation', // selector of the element that when clicked the animation will start. If not provided the animation will start automatically
        'stop' : '#stopAnimation' // selector of the element that when clicked the animation will stop (pause). If not provided the animation will go for ever
    });
});
＆＃13;
body, * {
    padding: 0 !important; margin: 0: }

#wrapper {
    width:500px; 
    height: 500px; 
    border: 
        1px solid red; }

li {
    position: absolute;
    width: 60px;
    height: 60px;    
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color:#0FF;
    line-height: 60px;
    text-align:center;
    cursor:pointer; }

button{
    width: 100px;
    height: 30px;
}
＆＃13;
＆＃13;
＆＃13;

Answer 2

我认为您希望将setInterval用于此问题。您可以在您创建的setInterval实例上使用clearInterval使其停止。

为什么我认为你应该使用setInterval而不是setTimeout？好吧因为setInterval用于在特定时间间隔内运行函数（这是你想要做的）。其中setTimeout用于延迟函数调用。

＆＃13;

＆＃13;

// sample code
var counter = 0;
var example = setInterval(function(){
   console.log(counter);
   if (counter == 10) {
     console.log("I'm out");
     clearInterval(example);  
   }
  counter++;
}, 300);

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以为变量分配超时功能并使用clearTimeout方法。如下所示：

var timer = setTimeout(function() {
            move($e);
        }, 50);

clearTimeout(timer);