Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

防止异步按钮多次触发

  在现在这个交互盛行的网络上,有许多按钮都是异步工作的。他们被点击后可能会和服务器交互,这需要时间。我们通常不希望这样的按钮点击事件被多次触发,所以会在事件中加入一些判断。但为每个这样的按钮都判断就太麻烦了,为何不试试封装呢?
  比如下面的代码就是一个基于jQuery的简易的封装 <input type="button" value="按钮" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$.fn.asyncClick=function(click,done){
  return (function reset($this){
    return $this.one("click",function(e){
      var isResolved=false,that=this;
      e.resolve=function(){
        if(isResolved)return;
        done&&done.apply(that,arguments);
        reset($this);
        isResolved=true;
      };
      click.apply(this,arguments);
    });
  })(this);
};

$("input").asyncClick(function(e){
  $(this).val("处理中···").attr("disabled","disabled");
  setTimeout(function(){
    e.resolve();
  },2000);
},function(){
  $(this).val("按钮").removeAttr("disabled");
});
</script>
  我当然更希望做成Deferred的模式,但是没那么容易,各种逻辑不明确。上面这个例子就是抛块板砖,希望能引出大家的玉来。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^