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/

我的变化的原因是，我不希望每次都出错铸造我的组合是错误的，但只有当它是正确的。

上面的代码在每次更改一个滑块时都会提供自动验证。另一种方法是添加一个用于手动验证的按钮。请让我知道，如果这就是你想要的，我也会提供一个例子。