从调用/子函数退出/中断主函数

exit/break main function from called/child function

本文关键字：函数 中断 子函数 调用 退出      更新时间：2023-09-26

我正在尝试在引导程序中创建类似按钮加载的东西。 基本上是在按钮/链接内创建加载文本并防止按钮/链接在操作结束之前正常运行

所以这是我的原型

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

但它对调用 btnLoader 函数的mainFunction或我想从btnLoader中断单击事件的第二个示例没有影响

有什么办法吗？

请注意，单击的元素可能是<a>或任何其他标签，并且它们没有禁用的属性，因此这不是一个选项

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

获取匹配元素

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

看起来像是给我的回调。我想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>

维护一个变量，该变量将设置一个标志，说明按钮当前是否正在加载。然后删除按钮卸载功能的标志。因此，在这个同时的时间里，如果还有其他调用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';
    .....
    .....
}

为什么不像下面这样简单？如果 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;
}

编辑

如果您出于某种未知原因不想修改 main 函数，那么您总是会抛出错误（尽管这可能会被很多人看不起）。

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