0

I am trying to disable the button until the code is successfully executed. Unfortunately, the button is activated too early, the function is still running. How can I prevent this?

$("#myButton").click(function() {
    $(this).prop("disabled", true)
    doSomethingFunction()
    $(this).prop("disabled", false)
});

Edit: Thank you all for your help. I have adjusted my code. Can you do it this way or are there better ways?

class TestClass
{
    static doSomethingFunction() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () { console.log("function is done");  resolve(self);  }, 5000);
        })
    }
}

$("#myButton").click(function() {
    $(this).prop("disabled", true)
    TestClass.doSomethingFunction().then(r => $(this).prop("disabled", false))
});

The second solution does not work for me, because "completely done" is output before "function is done"

class TestClass
{
    static doSomethingFunction(callback) {
        setTimeout(function () { console.log("function is done");}, 2000);

        if(callback !== undefined){
            callback();
        }
    }
}

$("#myButton").click(function() {
    $(this).prop("disabled", true)

    TestClass.doSomethingFunction(function(){
        console.log("completely done")
    });
});

What am I doing wrong?

hantoren
  • 357
  • 2
  • 17
  • 7
    Is `doSomethingFunction` asynchronous? If so does it return a promise? – charlietfl Nov 22 '21 at 17:46
  • You may need to pass in a callback function to run when the script is done. Your lines of code will all execute one after another, yet not wait until previous lines or functions are "done". So as soon as `doSomethingFunction()` starts executing, the next line is run. – Twisty Nov 22 '21 at 17:51

1 Answers1

0

Consider the following.

var myData;

function doSomethingFunction(callback){
  $.get("someplace.php", function(data){
    myData = data;
    if(callback !== undefined){
      callback();
    }
  });
}

$("#myButton").click(function() {
  var $self = $(this);
  $self.prop("disabled", true);
  doSomethingFunction(function(){
    console.log(myData);
    $self.prop("disabled", false);
  });
});

This allows you to pass in code to run once the function is complete. In this example, maybe it's getting data from the server. This may take almost no time, or maybe the report takes 1.2 seconds to generate. Either way it will not be run until the AJAX is successful.

Update

Here is an example, based on the following: How do I use jQuery promise/deffered in a custom function?

$(function() {
  function doSomething() {
    var deferred = new $.Deferred();
    setTimeout(function() {
      deferred.resolve(10);
    }, 10 * 1000);
    return deferred;
  }

  $("button").click(function() {
    var $self = $(this);
    console.log("Disabled");
    $self.prop("disabled", true);
    doSomething().then(function() {
      $self.prop("disabled", false);
      console.log("Enabled");
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Start</button>

This will run for 10 seconds and then enable the button. Applying it to your example.

class TestClass {
  static doSomethingFunction() {
    var deferred = new $.Deferred();
    setTimeout(function() {
      deferred.resolve(10);
    }, 5 * 1000);
    return deferred;      
  }
}

$("#myButton").click(function() {
  var $self = $(this);
  $self.prop("disabled", true);
  TestClass.doSomethingFunction().then(r => $self.prop("disabled", false));
});
Twisty
  • 30,304
  • 2
  • 26
  • 45