This is a migrated thread and some comments may be shown as answers.

Prevent double execution on fast double click

3 Answers 2328 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

Trinet asked on 16 Feb 2016, 02:47 PM

Kendo MVVM supports click event (data-bind="enabled: isEnabled, events: { click: onClick }"), like documentation on button demonstrates http://demos.telerik.com/kendo-ui/button/mvvm. Is there a way to prevent click of element while onClick function is executing and when onClick function finishes, element is enabled again.

Upper functionality can be accomplished by first disabling element and at the end of function enabling it again.

<div id="example">

<button data-role="button" data-bind="visible: isVisible, enabled: isEnabled, events: { click: onClick }">Click me</button>

</div>

<script>

var viewModel = kendo.observable({

isVisible: true,

isEnabled: true,

onClick: function() {

this.set("isEnabled", false); // disable

kendoConsole.log("event :: click");

this.set("isEnabled", true); // enable

}

});

kendo.bind($("#example"), viewModel);

</script>

Basically is there (or will be) a mvvm event that behaves like jQuery .one. This would specially be good when dealing with deffered objects like this:

<html>

<head>

<title>bla</title>

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#sel" ).on("click", function(e) {

$(this).attr("disabled", "disabled");

console.log("Clicked ....");

$.when(bla()).then(function(success){

console.log("Executed ok: " + success);

}, function(error) {

console.log("error");

});

function bla()

{

var def = $.Deferred();

setTimeout(function(){

def.resolve("ok1");

}, 5000);

return def.promise();

}

});

</script>

</head>

<body>

<button id="sel">Click me</button>

</body>

</html>

3 Answers, 1 is accepted

answered on 25 Feb 2016, 08:05 AM

Thank you for fast reply. Basically I'm asking if is there something like:

<button data-role="button" data-bind="events: { one: onClick }">Click me</button>

event one would disable the element for the time of onClick function and at the end of function enable button back. Like you posted in your example, at the beggining of the function you disable the button and at the end enable it.

Disabling element is important so user can't double click the button and therefore execute button action twice. Although javascript is single threaded, still if in onClick event you do async work (deffered when, done, fail ...), scenario of multiple execution could happen.