Jquery=setInterval代码在Firefox中有效,但在Chrome中无效
Jquery = setInterval code works in Firefox but not in Chrome
代码(来自一个旧插件,我正试图使其具有响应性)每隔n秒就会滑动一组图像。它使用如下所示的setInterval代码,在Firefox上运行良好。在Chrome上,它只运行一次,调试表明第二个setInteral函数没有被调用。请帮帮我,因为它让我发疯了。在运行示例http://lelal.com/test/site10/index.html(很抱歉加载时间)
play = setInterval(function() {
if (!busy) {
busy = true;
updateCurrent(settings.direction);
slide();
}
}, settings.speed);
完整的插件代码如下(抱歉太长)
/*
* jQuery Queue Slider v1.0
* http://danielkorte.com
*
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($){
var QueueSlider = function(element, options) {
var play = false,
busy = false,
current = 2,
previous = 2,
widths = [],
slider = $(element),
queue = $('ul.queue', slider),
numImages = $('img', queue).size(),
viewportWidth = slider.width(),
settings = $.extend({}, $.fn.queueSlider.defaults, options);
$(window).resize(function(){
if(busy !== false)
clearTimeout(busy);
busy = setTimeout(resizewindow, 200); //200 is time in miliseconds
});
function resizewindow() {
viewportWidth = slider.width();
if (settings.scale > 0) {
slider.css('height',viewportWidth * settings.scale);
computeQueueWidth();
}
queue.css('left', -getQueuePosition());
busy = false;
}
function requeue() {
$('li', queue).each(function(key, value) {
$(this).attr('class', 'slide-' + (key+1));
});
}
function updateCurrent(dir) {
current += dir;
if (current < 1) {
current = numImages;
} else if (current > numImages) {
current = 1;
}
}
function getQueuePosition() {
var i = 0, index = current-1,
queuePosition = (viewportWidth - widths[index]) / -2;
for (i = 0; i < index; i++) { queuePosition += widths[i]; }
return queuePosition;
}
function computeQueueWidth() {
var queueWidth = 0;
// factor = slider.height() / settings.imageheight;
// settings.imageheight = settings.imageheight * factor;
// Get the image widths and set the queue width to their combined value.
$('li', queue).each(function(key, value) {
var slideimg = $("img", this),
slide = $(this),
// width = slide.width() * factor,
width = slideimg.width();
slide.css('width', width+'px');
queueWidth += widths[key] = width;
});
queue.css('width', queueWidth + 500);
}
function slide() {
var animationSettings = {
duration: settings.transitionSpeed,
queue: false
};
// Emulate an infinte loop:
// Bring the first image to the end.
if (current === numImages) {
var firstImage = $('li.slide-1', queue);
widths.push(widths.shift());
queue.css('left', queue.position().left + firstImage.width()).append(firstImage);
requeue();
current--; previous--;
}
// Bring the last image to the beginning.
else if (current === 1) {
var lastImage = $('li:last-child', queue);
widths.unshift(widths.pop());
queue.css('left', queue.position().left + -lastImage.width()).prepend(lastImage);
requeue();
current = 2; previous = 3;
}
// Fade in the current and out the previous images.
if (settings.fade !== -1) {
$('li.slide-'+current, queue).animate({opacity: 1}, animationSettings);
$('li.slide-'+previous, queue).animate({opacity: settings.fade}, animationSettings);
}
// Animate the queue.
animationSettings.complete = function() { busy = false; };
queue.animate({ left: -getQueuePosition() }, animationSettings);
previous = current;
}
//
// Setup the QueueSlider!
//
if (numImages > 2) {
// Move the last slide to the beginning of the queue so there is an image
// on both sides of the current image.
if (settings.scale > 0) {
slider.css('height',viewportWidth * settings.scale);
}
computeQueueWidth();
widths.unshift(widths.pop());
queue.css('left', -getQueuePosition()).prepend($('li:last-child', queue));
requeue();
// Fade out the images we aren't viewing.
if (settings.fade !== -1) { $('li', queue).not('.slide-2').css('opacity', settings.fade); }
// Include the buttons if enabled and assign a click event to them.
if (settings.buttons) {
slider.append('<button class="previous" rel="-1">' + settings.previous + '</button><button class="next" rel="1">' + settings.next + '</button>');
$('button', slider).click(function() {
if (!busy) {
busy = true;
updateCurrent(parseInt($(this).attr('rel'), 10));
clearInterval(play);
slide();
}
return false;
});
}
// Start the slideshow if it is enabled.
if (settings.speed !== 0) {
play = setInterval(function() {
if (!busy) {
busy = true;
updateCurrent(settings.direction);
slide();
}
}, settings.speed);
}
}
else {
// There isn't enough images for the QueueSlider!
// Let's disable the required CSS and show all one or two images ;)
slider.removeClass('queueslider');
}
};
$.fn.queueSlider = function(options) {
return this.each(function(key, value) {
var element = $(this);
// Return early if this element already has a plugin instance.
if (element.data('queueslider')) { return element.data('queueslider'); }
// Pass options to plugin constructor.
var queueslider = new QueueSlider(this, options);
// Store plugin object in this element's data.
element.data('queueslider', queueslider);
});
};
$.fn.queueSlider.defaults = {
scale: 0,
imageheight: 500,
fade: 0.3, // Opacity of images not being viewed, use -1 to disable
transitionSpeed: 700, // in milliseconds, speed for fade and slide motion
speed: 7000, // in milliseconds, use 0 to disable slideshow
direction: 1, // 1 for images to slide to the left, -1 to silde to the right during slideshow
buttons: true, // Display Previous/Next buttons
previous: 'Previous', // Previous button text
next: 'Next' // Next button text
};
}(jQuery));
看看这里:
http://www.w3schools.com/jsref/met_win_setinterval.asp
setInterval()方法将继续调用该函数,直到调用clearInterval(。
看起来您是在第一次使用play
之后调用clearInterval
,这使它停止工作。
相关文章:
- 滚动在Chrome中有效,但在Firefox或IE中无效
- JS代码在jsbin中有效,在jsfiddle或Chrome/Safari中无效
- Javascript下载在firefox中停止,但在Chrome中有效
- 在Rails中使用remote:true在Chrome中有效,但在Safari中无效——从js.erb文件调用succe
- 在getJSON之后构建HTML在Safari中有效,但在Chrome或Firefox中无效
- 为什么对img标记的前向引用在Chrome上失败,但在FireFox和IE上有效
- 我如何创建一个Chrome应用程序,有效地充当信息亭模式下的启动页面
- Date对象在Chrome中有效,但在Safari、Firefox或IE中无效
- 在IE9中未检测到视图模型函数绑定,但在FF和Chrome中有效
- 使用 HTML5 更改<源> 音频在 Chrome 中有效,但不适用于 Safari
- 日期差异在Firefox和IE中有效,但在Chrome中返回NaN
- 为什么这段代码在FireFox和IE中不起作用,但在Chrome中却有效
- 为什么从位置哈希中选择下拉列表在 Chrome 上有效,但不适用于 Firefox、IE 或 Safari
- 如何链接 GCM Chrome 推送通知和有效负载数据
- 图像大小调整在Chrome中有效,但在Firefox中则不然
- AngularJs - $watch仅在Chrome Developer Tools打开时有效
- 砌体在移动浏览器(chrome)上不起作用,并且仅在Chrome桌面版本上有效,如果我重新加载(ctrl + f5)页面
- 图像交换在Firefox中不起作用,但在Chrome和IE中有效
- Google Web Map 复选框在 Firefox 和 Chrome 中有效,但在 IE 中不起作用
- 为什么这个setInterval/document.write代码在Chrome上有效,但在Firefox上不起作用