jquery移動延遲滑塊事件

Question

我試着在選擇最後一個值時啓動滑塊事件。這個想法是，創造像組合鎖。 我有這個解決方案：

<div data-role="page"> 
<label for="slider1">first</label> 
<input data-type="range" name="slider1" id="slider1" value="10" min="0" max="20" /> 
<br> 
<label for="slider2">second</label> 
<input type="range" name="slider2" id="slider2" value="10" min="0" max="20" /> 
<br> 
<label for="slider3">third</label> 
<input type="range" name="slider3" id="slider3" value="10" min="0" max="20" /> 
</div> 

var seconds = 3, 
timer; 
$("#slider1, #slider2, #slider3").on("slidestop", function(e) { 
var slider1_value = $('#slider1').val(); 
var slider2_value = $('#slider2').val(); 
var slider3_value = $('#slider3').val(); 
var update = function() { 
if (slider1_value == 15 && slider2_value == 2 && slider3_value == 2) { 
    alert("Great!!!"); 

} else { 
    alert("Try it again!!!"); 
    } 
} 
if (timer) clearTimeout(timer); 
timer = setTimeout(update, seconds * 1000); 

}); 

也許有更好的解決方案，因爲用戶必須等待3秒有事過嗎？

Here is my fiddle

Answer 1

這件怎麼樣？

$("#slider1, #slider2, #slider3").on("slidestop", function(e) { 
    var slider1_value = $('#slider1').val(); 
    var slider2_value = $('#slider2').val(); 
    var slider3_value = $('#slider3').val(); 
    if (slider1_value == 15 && slider2_value == 2 && slider3_value == 2) { 
    alert("Great!!!"); 
    } 
}); 

編輯

我使你成爲小提琴以及：https://jsfiddle.net/EliteSystemer/7hpbanq9/

我的變化的原因是，我不希望每次都出錯鑄造我的組合是錯誤的，但只有當它是正確的。

上面的代碼在每次更改一個滑塊時都會提供自動驗證。另一種方法是添加一個用於手動驗證的按鈕。請讓我知道，如果這就是你想要的，我也會提供一個例子。