JavaScript中的间隔执行功能，当鼠标移动元素

我想实现一个简单的事情上（小样这里）JavaScript中的间隔执行功能，当鼠标移动元素

[+] 123 [-]

当用户拿着鼠标+或-总和增加或减少。因此，我写了一个简单的脚本来做到这一点（http://jsfiddle.net/wFAfy/3/），似乎它的工作原理，但我对这种方法的效率/鲁棒性感到好奇，因为我在前端方面经验不是很丰富。

还有没有更好的方法来做到这一点（也许使用插件或其他）？

HTML：

<p id="sum">0<p> 
<a id="inc" href="#">inc on hover</a> | 
<a id="dec" href="#">dec on hover</a>

的JavaScript：

sum = $("#sum") 
inc = $("#inc") 
dec = $("#dec") 

currentSum = -> parseInt sum.text() 

incSum = -> sum.text currentSum() + 1  
decSum = -> sum.text currentSum() - 1 

run = (f, direction) -> 
    -> 
    return unless running[direction] == true 
    f() 

running = { inc: false, dec: false } 

inc.mouseenter -> running.inc = true 
inc.mouseleave -> running.inc = false 
dec.mouseenter -> running.dec = true 
dec.mouseleave -> running.dec = false 

setInterval run(incSum, "inc"), 200 
setInterval run(decSum, "dec"), 200

来源

2013-03-18 evfwcqcg

如何对HTML5'<输入类型=数字比例= 1分钟= 0最大= 100>'标签？ – Pointy 2013-03-18 15:44:24

不需要进行“悬停”和“悬停悬停”链接。他们可以是div，你可以将它们设计成链接。如果用户点击链接，页面将被重新加载。 – Lowkase 2013-03-18 15:46:09

而不是始终有2个'setInterval'总是运行并检查一个标志，在'mouseenter'上执行'setInterval'，并在'mouseleave'上执行'clearInterval' – Ian 2013-03-18 15:51:30

我同意伊恩的建议 - 这里是实现的一个示例：

$sum = $ '#sum' 
$inc = $ '#inc' 
$dec = $ '#dec' 

currentSum = 0 

incSum = -> $sum.text currentSum++ 
decSum = -> $sum.text currentSum-- 

interval = null 

$inc.on 
    'mouseenter' : -> 
    interval = setInterval incSum, 200 
    incSum() 
    'mouseleave' : -> clearInterval interval 

$dec.on 
    'mouseenter' : -> 
    interval = setInterval decSum, 200 
    decSum() 
    'mouseleave' : -> clearInterval interval

来源

2013-04-23 20:49:27

JavaScript中的间隔执行功能，当鼠标移动元素

回答

相关问题