从被调用/子函数退出/打破主要功能

Question

我试图在bootstrap中创建类似按钮加载的内容。基本上创建一个按钮/链接中加载文本和防止运行，直到操作

所以这里的结束按钮/链接是我的原型

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')); 
} 

所以这工作得很好像

<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> 

这是问题： 我想要按钮加载

我可以做这样的事情，以检查是否按钮已经disabled类

function btnLoader(b){ 

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

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

后停止，但它对mainFunction没有效力的调用btnLoader功能或第二例如，我想打破点击事件btnLoader

有没有办法做到这一点？

普莱斯注意，点击的元素可能是<a>或其他任何标记，他们没有禁用的属性，所以这不是一个选项

Answer 1

看起来像一个回调给我。我想jQuery函数就可以了。

$.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>

Answer 2

使用.prop =>if(b.prop('disabled', true))

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

Answer 3

保持一个变量，该变量将设置一个标志，指出按钮当前是否正在加载。然后删除按钮卸载功能上的标志。因此，在此期间，如果有其他调用btnLoader()函数，它将不会处理它，直到该标志被设置为false。这里是一个让你更好理解的代码。

var btnBusy = false; 

function btnLoader(b){ 
    if(!btnBusy){ // if button is not busy, ie if its not in a loading state, then put to loading state. 
    var txt = b.attr('data-text' , b.text()); 
    b.addClass('disabled').text('......'); 
    } 
// else since the button is busy just don't do anything on consecutive calls to this function 
} 

function btnunLoader(b){ 
    if(btnBusy){ 
    b.removeClass('disabled').text(b.attr('data-text')); 
    btnBusy = false; // set back the busy status to false 
    } 
} 

编辑：如果突破其称为子功能的主要功能是你唯一的目标。然后你可以做下面的东西。

function mainFunction(id){ 
    var loaderStatus = btnLoader($('#btn-'+id)); 
    if (loaderStatus === 'break') { 
     return; // this will break your main function 
    } 
    do stuff 
    btnunLoader($('#btn-'+id)); 
} 

而且你可以让你在btnLoader功能，当以往任何时候都应该打破的主要功能，并返回一个字符串break回主功能逻辑。

function btnLoader(b){ 
    // to break the function which called this function 
    return 'break'; 
    ..... 
    ..... 
} 

Answer 4

为什么不像以下那样简单化？只要btnLoader不应该继续，返回false，如果应该继续，则返回true。

function mainFunction(id){ 
    if(btnLoader($('#btn-'+id)) === false) { 
     return; 
    } 
    //do stuff 
    btnunLoader($('#btn-'+id)); 
} 

function btnLoader(b){ 

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

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

编辑

如果你不想修改一些不明原因的主要功能，那么你可以总是抛出一个错误（虽然这很可能会在被很多人瞧不起） 。

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