Prevent double execution on fast double click

4 posts, 0 answers
  1. Licence
    Licence avatar
    5 posts
    Member since:
    May 2012

    Posted 16 Feb Link to this post

    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>

     

     

  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 19 Feb Link to this post

    Hi,

    I'm not sure I understood your question. You should be able to apply the same pattern as with the plain button using the Kendo button widget. Here is a test page which demonstrate this. Please take a look, maybe I'm missing something.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Licence
    Licence avatar
    5 posts
    Member since:
    May 2012

    Posted 25 Feb in reply to Rosen Link to this post

    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.

  5. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 26 Feb Link to this post

    Hello Licence,

    I'm afraid that there is no such binding. However, if you need such, you should be able to create it on your own. Here you can find information about creating custom bindings.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready