javascript - 在 clearInterval 后重新调用 setInterval 导致多个间隔(幻灯片)
问题描述
我是 Javascript 的新手,我在以适当的方式开发自己的幻灯片时遇到了很大的困难。
我基本上设置了一个由三张图片组成的幻灯片,setInterval 设置了 5 秒的功能,三个按钮来浏览图片等。
我唯一的问题是,在用户单击某个按钮(可能是哪个按钮)后,计时器不会重置。
自从我从昨天开始对此进行研究以来,我已经尝试了几种不同的方法,并且我发现了一种更有效的方法,即 clearInterval 在单击按钮后确实可以工作,但发生的是它触发了多个计时器。假设我在一个按钮上单击两次,每次单击间隔一秒钟,第一个计时器(5 秒)将被重置,但是这两次单击会创建两个 5 秒计时器,使幻灯片变得很糟糕。我觉得某处应该有一个 .stop() ,但我不知道在哪里,或者即使这是具体的问题。
function myTimer() {
var indice_activo = $('.active').index();
if (indice_activo < $('.intro-slide').length - 1) {
var proximo_indice = indice_activo + 1;
} else {
var proximo_indice = 0;
}
mudar_slide(proximo_indice);
var indice_activo = $('.active').index();
var botao_anterior = indice_activo - 1
// var proximo_indice = indice_activo + 1;
$('.button').removeClass('active-button');
$('.button').eq(indice_activo).addClass('active-button');
if (indice_activo > 0) {
$('.button').eq(botao_anterior).removeClass('active-button');
} else {
$('.button').eq(2).removeClass('active-button');
}
};
// BUTTON CLICK WITH CLEARINTERVAL AND RE-INVOCATION OF FUNCTION
$('.button').click(function() {
clearInterval(intervalo);
setInterval(myTimer, 5000);
$('.button').removeClass('active-button');
var indice_botao_atual = $(this).index();
$('.intro-slide').removeClass('active').stop().fadeOut();
$('.intro-slide').eq(indice_botao_atual).addClass('active').stop().fadeIn();
$(this).addClass('active-button');
});
解决方案
您忘记关闭该myTimer
功能。这会导致所有其他代码(现在位于其中的代码)每次myTimer
被setInterval
函数调用时都被调用。
function myTimer() {
var indice_activo = $('.active').index();
if (indice_activo < $('.intro-slide').length - 1) {
var proximo_indice = indice_activo + 1;
} else {
var proximo_indice = 0;
}
} // <--- missing curly brace
推荐阅读
- ckeditor - ckeditor4 自动完成插件在提交时添加行为
- python - 在 Plotly Dash 中的字典中设置滑块上的标记
- css - CSS var() 回退是否在不受支持的浏览器中工作?
- oauth-2.0 - OAuth 2.0/2.1 - 资源所有者密码凭证授予替代方案
- javascript - 如何从python中的JavaScript标签获取数据?
- c++ - 将类型插入 std::map 时出现“没有匹配的函数调用”
- r - 有没有办法根据名称向量进行过滤?
- python - panda python groupby 取决于其他列表
- ios - 如何将选定的行移动到 UICollectionView 的顶部
- r - 有没有办法将 HTML tab_model 对象转换为 R 对象,如 data.frame 或 tibble?