2013-02-19 73 views
3

我有一個設置了間隔的mousedown事件。我希望間隔的時間是可變的。所以第一個是500,第二個500/2 = 250,等等。任何提示?指數時間減少的設置間隔

$plus.mousedown(function(e) { 
    increment(20) 
    timeout = setInterval(function(){ 
     increment(20) 
    }, 500); 
}); 
$(document).mouseup(function(){ 
    clearInterval(timeout); 
    return false; 
}); 

乾杯!

編輯:抱歉的歧義。我希望間隔時間在mousedown期間改變。所以當mousedown被執行時,間隔時間應該改變。所以不是每一次點擊鼠標,而是每次連續點擊,然後重新設置。

+0

a)使用變量b)每次點擊時將它除以2? – Bergi 2013-02-19 23:39:53

回答

5

你不能真正做到這一點與setInterval()除非你保持周圍setTimeout()掃清了延遲變化,所以你不妨寫一個包裝來完成類似的東西:

function easingTimeout(delay, fn) 
{ 
    var id, 
    invoker = function() { 
    fn(); 
    delay = Math.floor(delay/2); 
    if (delay) { 
     id = setTimeout(invoker, delay); 
    } else { 
     id = null; 
    } 
    } 

    // start it off 
    id = setTimeout(invoker, delay); 

    return { 
    clear: function() { 
     if (id) { 
     clearTimeout(id); 
     id = null; 
     } 
    } 
} 

要使用:

var timeout; 

$plus.mousedown(function(e) { 
    increment(20); 
    timeout = easingTimeout(500, function() { 
     increment(20); 
    }); 
}); 

$(document).mouseup(function(){ 
    timeout.clear(); 
    return false; 
}); 
1

該解決方案不依賴於jQuery的:

var timeoutInterval = 500; 
var mousedown = false; 

function incrementAndWait() { 
    if (!mousedown) return; 
    increment(20); 
    timeout = setTimeout(incrementAndWait, timeoutInterval); 
    timeoutInterval /= 2; 
} 

document.onmousedown = function() { 
    timeoutInterval = 500; // Reset to 500 to allow multiple mousedown/mouseup 
    mousedown = true; 
    incrementAndWait(); 
}; 

document.onmouseup = function() { 
    mousedown = false; 
} 

您可以將console.log((new Date).getTime(), 20);添加到incrementAndWait方法以查看控制檯上的數字。玩一些有趣的東西:)