使用範圍輸入動態更改setInveral/Timeout速度

我想知道是否可以使用html5範圍輸入動態更改setInterval或setTimeout速度？如果是這樣，我該怎麼做？我試圖將輸入值保存到一個變量中，然後將變量設置爲一個間隔/超時時間，但它沒有工作，間隔/超時全速工作。任何人都可以給我一些例子嗎？ :)使用範圍輸入動態更改setInveral/Timeout速度

var elem = document.querySelector('input[type="range"]'); 
 

 
var rangeValue = function(){ 
 
    var newValue = elem.value; 
 
    var b = newValue; 
 
    delay = b; 
 
    setInterval(function(){ 
 
    console.log("Hi") 
 
    }, delay); 
 
    
 

 
} 
 

 
elem.addEventListener("input", rangeValue);

<input name="1" type="range" min="1000" max="7000" step="10" value="0">

來源

2017-07-18 Hatchling

這是絕對可能的。只需使用'document.getElementById（）.value'來傳遞要使用的值。如果這不適合你，你需要更新你的問題，以顯示你已經嘗試了什麼，展示你正在面對的具體問題[**最小，完整，可驗證的例子**]（http： //stackoverflow.com/help/mcve）。 –

我試過這種方式，但沒有成功。 https://codepen.io/Hatchling/pen/eRaELE – Hatchling

將您在代碼中嘗試的代碼 – epascarello

輸入事件是怎麼回事，因爲它滑動火多次的輸入範圍，所以當你覺得你只設置1個間隔/超時要設置多個。這給人的印象是你的計時器是以全速運行的（我假設你的意思是它被設置爲0延時）。

你可以做什麼來反擊行爲，即保存從setTimeout/Interval返回的計時器ID。然後立即在回調開始時將其清除，以確保任何先前的定時器不再運行。

var elem = document.querySelector('input[type="range"]'); 
 

 
var timerId = null; 
 

 
var rangeValue = function(){ 
 
    clearInterval(timerId); 
 
    var delay = elem.value; 
 
    timerId = setInterval(function(){ 
 
    console.log("Hi") 
 
    }, delay); 
 
} 
 

 
elem.addEventListener("input", rangeValue);

<input name="1" type="range" min="1000" max="7000" step="10" value="0">

來源

2017-07-18 23:59:07

好吧，對我來說這麼簡單，太辛苦了。感謝您的幫助，我很感激。 – Hatchling

我還有一個問題，我如何獲得滑塊的價值而不移動它？我的意思是我有setTimeout，通常在完成某些動作時激活他自己。在我的情況下，當玩家從我身上移動1步時，它會調用該函數，但它在打鬥功能上有超時（一般來說，當玩家距離我的英雄有1步時，會自動攻擊玩家的腳本）。我在Timeout我在那裏，但它只有當我移動滑塊和玩家距離我的英雄1步時才起作用。 – Hatchling

https://pastebin.com/raw/CtePCGPG這是腳本，如果有幫助 – Hatchling

您需要添加兩個不同的東西。首先，您需要存儲當前時間間隔，以便在設置新時間間隔時清除它。此外，您應該在更改滑塊時添加超時，以便您不在路徑中的每個值上設置間隔。

var elem = document.querySelector('input[type="range"]'); 
 
var slideInput; 
 
var currentInterval; 
 

 
var rangeValue = function(){ 
 
    if (currentInterval) { 
 
    clearInterval(currentInterval); 
 
    } 
 
    var newValue = elem.value; 
 
    var b = newValue; 
 
    delay = b; 
 
    currentInterval = setInterval(function(){ 
 
    console.log("Hi") 
 
    }, delay); 
 
    
 

 
} 
 

 
elem.addEventListener("input", function() 
 
{ 
 
    if (slideInput) { 
 
    clearTimeout(slideInput); 
 
    } 
 
    
 
    slideInput = setTimeout(rangeValue, 250); 
 
});

<input name="1" type="range" min="1000" max="7000" step="10" value="0">

來源

2017-07-19 00:03:45 Russell

有趣，謝謝你的幫助！ :) – Hatchling

使用範圍輸入動態更改setInveral/Timeout速度

回答

相關問題