我是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);
});
该函数永远被调用但我想在单击按钮时停止重复的功能
我做错了什么?
答案 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