setInterval 和clearInterval jquery - IE7 中的 stackoverflow
我有一个 jquery 代码,它连续上下移动一个包含带有徽标的列表的 div。动画在设定的时间间隔内重复,并且在 Chrome、FireFox 以及 IE 9 和 8 中似乎一切都按预期工作(没有控制台错误)。
然而,在 IE7 中,我收到“脚本错误”,浏览器完全冻结...我认为 setInterval 和clearInterval 无法正常工作,或者我弄乱了我的代码...
这是:
//<!------------------LOGOS ------------------>
// the automatic scroll start immediately
$(document).ready(function () { membersLogos() });
// set the interval after which to restart the animated scroll
$(function () {
var intervalID;
var resetTimer = function () {
if (intervalID) { clearInterval(intervalID) };
intervalID = setInterval(function () {
membersLogos();
}, 190000);
};
});
// set the interval after which to restart the animated scroll
function membersLogos() {
var pane = $('#mypane');
if ($('#mypane').length) {
pane.jScrollPane({
animateScroll: true, //added
animateDuration: 95000, //added - length each way in milliseconds
stickToTop: true,
//autoReinitialise: true,
enableKeyboardNavigation: true
});
var api = pane.data('jsp');
var logosHeight = parseInt($('#mypane .jspPane').height());
//listen to the x-axis scrolling event
pane.bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
//we're at the bottom now lets scroll back to the top
if (at_bottom) {
api.scrollToY(0);
$(this).unbind(event); //added with edit
$(this).bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
if (at_top) {
$(this).unbind(event);
api.scrollToY(logosHeight);
}
});
}
});
//initial animate scroll to the top
api.scrollToY(logosHeight);
}
}
有什么想法或建议吗?提前致谢! 维克
I have a jquery code that is moving up and down continuously a div containing a list with logos. The animation is repeating within a set interval and is all seems to be working as expected in Chrome, FireFox and IE 9 and 8 (no console errors).
However in IE7 I get 'script error' and the browser totally freezes... I think the setInterval and clearInterval are not working properly or i have messed up my code...
Here it is:
//<!------------------LOGOS ------------------>
// the automatic scroll start immediately
$(document).ready(function () { membersLogos() });
// set the interval after which to restart the animated scroll
$(function () {
var intervalID;
var resetTimer = function () {
if (intervalID) { clearInterval(intervalID) };
intervalID = setInterval(function () {
membersLogos();
}, 190000);
};
});
// set the interval after which to restart the animated scroll
function membersLogos() {
var pane = $('#mypane');
if ($('#mypane').length) {
pane.jScrollPane({
animateScroll: true, //added
animateDuration: 95000, //added - length each way in milliseconds
stickToTop: true,
//autoReinitialise: true,
enableKeyboardNavigation: true
});
var api = pane.data('jsp');
var logosHeight = parseInt($('#mypane .jspPane').height());
//listen to the x-axis scrolling event
pane.bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
//we're at the bottom now lets scroll back to the top
if (at_bottom) {
api.scrollToY(0);
$(this).unbind(event); //added with edit
$(this).bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
if (at_top) {
$(this).unbind(event);
api.scrollToY(logosHeight);
}
});
}
});
//initial animate scroll to the top
api.scrollToY(logosHeight);
}
}
Any ideas or suggestions as what is wrong? Thanks in advance!
Vik
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
由于您已将间隔设置为两个动画的总和 (190000 = 95000 * 2),因此如果在动画完成之前再次触发间隔函数,我不会感到惊讶,也许导致某物踩到另一物。检查起来很容易:只需将间隔设置为 300000 或其他值,然后看看问题是否消失。
为了避免过早再次触发间隔的可能性,而不是使用
setInterval
(这几乎总是比它的价值更麻烦),我会看看jScrollPane
是否提供当动画完成时,你会收到一个完成回调。如果是,则使用该完成回调来触发下一个动画。如果没有,我可能会考虑添加它。Since you've set your interval to exactly the sum of the two animations (190000 = 95000 * 2), I wouldn't be surprised if the interval function was being fired again before the animation completed, perhaps causing something to step on something else. It's easily checked: Just set your interval to 300000 or something and see if the problem goes away.
To avoid the possibility of having the interval fire again too soon, rather than using
setInterval
(which is almost always more trouble than it's worth), I'd see ifjScrollPane
offers you a completion callback when the animation is complete. If it does, use that completion callback to trigger the next animation. If it doesn't, I'd probably look to add it.