Question

我正在尝试制作一个简单的Javascript / Jquery程序，它将循环浏览网站首页上的产品轮播。

以下是代码：

	jQuery(document).ready( function() {
		function next() {
			if(window.location.href === window.location.origin + '/') {
				var nextButton = jQuery('.prevSlide');
				nextButton.trigger('click');
				console.log('next');
				return;
			}
		}

		function prev() {
			if(window.location.href === window.location.origin + '/') {
				jQuery('.nextSlide').click();
				console.log('prev');
				return;
			}
		}

		jQuery('.iosSlider').hover( function() {
			jQuery(this).addClass('pauseInterval');
		}, function () {
			jQuery(this).removeClass('pauseInterval');
		}
		);

		function cycleNext() {
			if( !(jQuery('.prevSlide').hasClass('disabled'))) {
				if( !(jQuery('.iosSlider').hasClass('pauseInterval'))) {
					next();
				}
			} else {
				clearInterval(interval);
				intervalTwo = setInterval(cyclePrev, 2000);
				console.log('interval cleared');
				console.log('intervalTwo set');
				return;
			}
		}

		function cyclePrev() {
			if( !(jQuery('.nextSlide').hasClass('disabled'))) {
				if(!(jQuery('.iosSlider').hasClass('pauseInterval'))) {
					prev();
				}
			} else {
				clearInterval(intervalTwo);
				var interval = setInterval(cycleNext, 2000);
				console.log('intervalTwo cleared');
				console.log('interval set');
				return;
			}
		}

            	var interval = setInterval(cycleNext, 2000);
		console.log('interval set');

	});

在下一个（）和prev（）函数的每一个中，我检查我是否在主页上，并且只在这样做的情况下继续。

如果鼠标悬停在产品滑块上，还有一些代码可以暂停循环。

当滑块位于开头或结尾时，会将名为“disabled”的类添加到prevSldie和nextSlide锚点。

理想情况下，我想点击滑块的末尾，然后点击回到开头，然后点击结束等。

所以控制流程，据我所知，如下：

设置间隔，以便每两秒钟点击我的轮播上的下一个按钮。

滑块到达末尾，该间隔结束并设置新的滑块。

每两秒钟点击一次按钮，直到旋转木马开始。

这个过程无限重复。

当滑块运行到结束，开始和结束时，情况正常，然后事情变得混乱。

控制台输出（应单击下一步，每次显示5次）

（5）接下来间隔清除 intervalTwo设置（5）上一篇 intervalTwo清除区间设定（5）接下来间隔清除 intervalTwo设置间隔清除 intervalTwo设置上一页下一个（2）上一篇下一个（2）上一篇下

从那里到处都只会变得更加乱七八糟。

我无法弄清楚为什么一切都能在前几个循环中正常工作并在此之后停止工作，任何帮助都会非常受欢迎。

Answer 1

您的间隔是否正确？你永远不会定义intervalTwo，所以它变成了一个全局的。然后在cyclePrev函数中，再次使用var interval，它将作为该函数的范围，因此不会包含函数外部的间隔，一旦再次到达cycleNext就要清除。尝试更改：

var interval = setInterval(cycleNext, 2000),
    intervalTwo = null;
console.log('interval set');

然后将cyclePrev中的var interval = setInterval(cycleNext, 2000);更改为interval = setInterval(cycleNext, 2000);

无法确定我的Javascript程序的控制流程

1 个答案: