我有一个与此类似的setTimeout问题.但是这个解决方案对我没用,因为我不能在我的文件中使用php.
我的网站有一个滑块,其中包含每8秒移动一次的图像列表.但是,当我在浏览器中打开一些选项卡然后再切换回来时,它就变得疯狂了.滑块继续一个接一个地移动图像而没有8秒的时间延迟.
我只在Chrome和最新的Firefox中看到它.
**编辑:我检查了console.log(),并且setTimeout在clearTimeout之前和之后返回相同的数字.不知道为什么.也许这也与它有关？**
编辑2:我添加了一个小提琴:http://jsfiddle.net/Rembrand/qHGAq/8/
代码看起来像:
spotlight: {
i: 0,
timeOutSpotlight: null,
init: function()
{
$('#spotlight .controls a').click(function(e) {
// do stuff here to count and move images
// Don't follow the link
e.preventDefault();
// Clear timeout
clearTimeout(spotlight.timeOutSpotlight);
// Some stuff here to calculate next item
// Call next spotlight in 8 seconds
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
});
// Select first item
$('#spotlight .controls a.next:first').trigger('click');
},
animate: function(i)
{
$('#spotlight .controls …现在,我似乎能够使用px但不使用百分比在SVG内的组上应用translate和translate3d.我想知道是否可以使用%？我需要它们的原因是因为我想通过CSS动画几个SVG的内容.(使用像snap或svgjs这样的JS库给我带来了一大堆其他令人头疼的问题,例如Chrome中的扩展问题,所以我宁愿避免使用它们.)
我创建了一个小提琴来说明这种行为:http://jsfiddle.net/f4MU3/4/
CSS:
.cloud-svg .group {
-webkit-transform:translate3d(50%,50%,0);
-moz-transform:translate3d(50%,50%,0);
transform:translate3d(50%,50%,0);
}
HTML:
<div class="container">
<div class="cloud">
<svg class="cloud-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 107.4 50.6" enable-background="new 0 0 107.4 50.6" xml:space="preserve" preserveAspectRatio="xMinYMin meet" width="100%" height="100%">
<svg x="0%" y="0%" viewBox="0 0 107.4 50.6">
<g class="group">
<path d="M74.6 20.6c3.4-5.3 8.5-7.2 14.1-7.9c4.3-0.6 8.7-0.3 12.8 1.7c1.9 0.9 3.2 2.2 3.8 4.1 c0.8 3.1 1.8 6.2 1.9 9.5c0.1 5.8-0.6 11.5 0.2 17.3c0.4 2.8-0.5 3.5-3.3 3.5c-5.2-0.1-10.3-0.5-15.5-0.8c-0.6 0-1.3-0.1-1.9-0.3 c-2-0.9-2.7 3.8-5.2 0.9c-1.7-1.9-4.3-1-6.5-1c-2.1 0.1-4.7 0.2-6.1-0.4c-6.5-3-12.8-0.4-19.1-0.4c-3.9 …