exit/break main function from called/child function

debugcn 投稿 Dev

max

I'm trying to create something like button loading in bootstrap. basically creating a loading text inside a button/link and preventing button/link from functioning until the end of operation

So here is my prototype

function btnLoader(b){
    var txt = b.attr('data-text' , b.text());
    b.addClass('disabled').text('......');
}

function btnunLoader(b){
    b.removeClass('disabled').text( b.attr('data-text'));
}

So this works fine like

<a href="#" onclick="mainFunction(1);" id="btn-1"> send comment </a>
<script>
function mainFunction( id){
    btnLoader($('#btn-'+id));
    do stuff 
    btnunLoader($('#btn-'+id));
}
</script>

<a href="#" id="like-btn"> LIKE </a>
<script>
$('#like-btn').on('click'  , function(){
    btnLoader($(this));
    do stuff        
})
</script>

Here is the problem: I want the button to be disabled after the loading

I can do something like this to check if button already has disabled class

function btnLoader(b){

    if(b.hasClass('disabled'))
        return false;

    var txt = b.attr('data-text' , b.text());
    b.addClass('disabled').text('......');
}

But it has no effect on the mainFunction which is calling the btnLoader function or on the second example i want to break the click event from btnLoader

Is there anyway to do that ?

Pleas note that clicked element might be <a> or any other tag and they don't have a disabled attribute so that's not an option

xpy

Looks like a callback to me. I suppose a jQuery function will be ok.

$.fn.btnLoader = function(callback) {
  this.on('click', function() {
    btnLoader.call(this, callback);
  });
};

function btnLoader(callback) {


  if ($(this).is('.disabled'))
    return;
  
  console.log("doing btnLoader stuff");
  var txt = $(this).attr('data-text', $(this).text());
  $(this).addClass('disabled').text('......');
  callback.call($(this));
}


function mainFunction() {

  console.log("doing stuff");
  // do stuff
  btnunLoader(this);
}


$('#like-btn').btnLoader(function() {
  console.log("doing other stuff");
  // do stuff 
});

function btnunLoader() {
  $(this).removeClass('disabled').text($(this).attr('data-text'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="btnunLoader.call(this,mainFunction)" id="btn-1"> send comment </a>
<br>
<a href="#" id="like-btn"> LIKE </a>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]