停止递归函数

时间:2017-02-03 07:44:37

标签: javascript jquery

我是javascript和jquery的全新...我已经搜索但找不到我的问题的答案...

我需要在最后调用自己调用的函数(我读到这称为递归函数)

所以我的HTML

<div id="slide_show"></div>
<a href="#" class="stop">Stop</a>

我的js

//call effect on load
$(function() {
    moveSlide(true);
});

//move the div
function moveSlide(repeat) {
    if(repeat === true) {
        $('#slide_show').slideToggle('slow',function() {
            setTimeout(function() {
                moveSlide(true);
            },2000);
        });
    } else {
        return;
    }
}

//stop the function
$(document).on('click','.stop',function(e) {
   e.preventDefault();
   moveSlide(false);
});

该函数永远被调用但我想在单击按钮时停止重复的功能

我做错了什么?

2 个答案:

答案 0 :(得分:3)

在其他情况下尝试: clearTimeout()

您需要在一个变量中创建setTimeout()。如果条件为false,则应用clearTimout()(它表示else语句)

var timer;
//call effect on load
$(function() {
    moveSlide(true);
});

//move the div
function moveSlide(repeat) {
    if(repeat === true) {
      console.log('running')
        $('#slide_show').slideToggle('slow',function() {
            timer = setTimeout(function() {
                moveSlide(true);
            },2000);
        });
    } else {
      clearTimeout(timer);
       console.log('stopped')
        return;
    }
}

//stop the function
$(document).on('click','.stop',function(e) {
   e.preventDefault();
   moveSlide(false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="slide_show"></div>
<a href="#" class="stop">Stop</a>

答案 1 :(得分:0)

我看到你正在调用方法moveSlide,进入setTimeout

$('#slide_show').slideToggle('slow',function() {
            setTimeout(function() {
                **///moveSlide(true); ///here , will be calling recursive untill end**
            },2000);
        });

测试并告诉我们,是否有帮助

TKS