如何延迟增加var？

我试着在用户接管的链接如何延迟增加var？

var i = 0; 

function next(){ 
    while (i>-10) { 
     i--; 
     $('#conteudo').animate({left:"'"+i+"px'"},'slow'); 
    }; 
} 

$('#next').hover(function(){ 
    next(); 
});

但其瞬间增加值-10 ..我尝试做这样的事情的动画元素：-1 ..- 2 ..- 3。。-4 ..直到达到-10。我可以在增加之前控制延迟吗？

什么即时做错了什么？

这里的链接的jsfiddle http://jsfiddle.net/KwhSg/

来源

2013-04-03 Ramon Vasconcelos

灿我们看到一个类似于你想要做的事情的演示 - 在另一个网站上它可能已经完成了，或许？只是我认为人们可能会在这里得到错误的想法 - 从你的代码中，这只会运行一次。所以，如果你悬停，unhover，和悬停再次，里面'下一个（）'将只执行首次作为，为你正确地说，'i'递减代码-10几乎瞬间。根据我的估算，您希望每当用户将鼠标悬停在'＃next'上时，都会发生这种情况，对吗？ – ClarkeyBoy 2013-04-03 19:34:39

PS如果你希望它发生的每用户将鼠标悬停'＃next'时间，设置'I = 0'的'hover'函数内。我不确定这是否仅在鼠标输入时执行，或者一直在盘旋时执行，请记住。 – ClarkeyBoy 2013-04-03 19:36:45

1分钟，生病后它的jsfiddle – 2013-04-03 19:39:19

可以使用setTimeout函数

http://www.w3schools.com/jsref/met_win_settimeout.asp

只是用在给定的时间间隔

来增加你的动画值，因为这仍然ISN”解决，这是一个解决方案。您可以根据需要更改超时/动画速度。

http://jsfiddle.net/649az/

var i =10; 
function next(){   
    $('#conteudo').animate({left:"-=10"},'slow'); 
} 


$('#next').hover(function(){ 

    while (i>0){ 
     i--; 
     setTimeout(next(),1000); 
    } 
});

来源

2013-04-03 19:26:36 75inchpianist

这个'setTimeout'将会调用undefined，因为next（）会立即被调用并返回undefined，即使你将它改为setTimeout（next，1000）;它没有多大意义，因为在1000毫秒之后next将被调用10次。 – 2013-04-03 23:32:08

ummm jsfiddle？ – 75inchpianist 2013-04-04 01:07:10

jquery动画排队，这就是为什么它似乎工作，但你的例子当你删除'setTimeout（next（），1000）''，并且在那里只写'next（）;'时，它将以完全相同的方式运行。 'setTimeout'在你的代码中没有效果。在'next'函数中放置'console.log'，你会看到它。 – 2013-04-04 10:11:21

我想你误会了animate一样。尝试用此替换整件事：

$('#next').hover(function(){ 
    $('#conteudo').animate({left:'-=10'},'slow'); 
});

Animate已经照顾动画，延迟，作品。

来源

2013-04-03 19:28:12

对于' - = 10'来说+1。我希望它适用于我尝试使用它时）; – Ejaz 2013-04-03 19:32:01

啊，顺便说一句，你有一个额外的'{'in'animate' – Ejaz 2013-04-03 19:33:01

@Ejay我刚刚解决了这个问题，但是谢谢 – 2013-04-03 19:33:44

像另一个回答者指出，animate旨在照顾这对你。但对于学习的缘故，这里是如何做你想做什么：

var i = 0; 
function next(){ 
    $('#conteudo').css({left:"'"+i+"px'"}); 
    // use setTimeout to pause for 30 milliseconds and let the view update 
    if (i-- > -10) setTimeout(next, 30); 
} 

$('#next').hover(function(){ 
    next(); 
});

您需要使用setTimeout而不是while循环。它在迭代之间暂停（在这种情况下为30毫秒），以便视图可以更新。

在原来的尝试，只要while循环执行，它有过程的全面控制，因此认为不能更新，直到循环结束。一旦循环完成，它已经完成递减i，所以你没有得到任何动画。

来源

2013-04-03 19:30:13

“只要while循环正在执行......” - 你指的是什么while循环？通过我的推算，视图可以在代码之外的30毫秒内更新。另一个函数可以非常高兴地在30毫秒内将'left'设置为0。 – ClarkeyBoy 2013-04-03 19:40:17

他的问题中的while循环 - 他的第一次尝试。 – 2013-04-03 19:43:11

你也能设置，可以在你的“悬停”事件真被设置布尔变量，并以“悬停去”事件假的，所以你的while循环会像这样

function next(){ 
    while (i>-10 && !notHovered) { 
     i--; 
     $('#conteudo').animate({left:"'"+i+"px'"},'slow'); 
    }; 
}

来源

2013-04-03 19:30:41

如何延迟增加var？

回答

相关问题