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

使用.prop =＆gt; if(b.prop('disabled', true))

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

Answer 2

维护一个变量，该变量将设置一个标志，说明该按钮当前是否正在加载。然后删除按钮卸载功能上的标志。所以在这个平均时间内，如果对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字符串返回给main函数。

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

Answer 3

为什么不像以下那样简单化？如果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('......'); }

Answer 4

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

从被调用/子函数中退出/中断main函数

4 个答案: