Avoid "nervous finger" button switch switch [duplicate]

Question

Avoid "nervous finger" button switch switch [duplicate]

Navigation

#1 by (1 votes)

-1

I have a switch button, and I want to make a post every time it changes from true to false. But I need to prevent the guy from clicking several times. And just make the change from true to false after completing the previous post.

For those who want to see my function today it's like this:

link

$(function() {

  $('.switch').on('change', function() {
    $(this).toggleClass('checked');
  });

});

body {
  background-color: #fafafa;
  margin: 60px;
}
.switch {
  background-color: #bebebe;
  border-radius: 4px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  height: 26px;
  margin-bottom: 12px;
  position: relative;
  width: 60px;
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}
.switch.checked {
  background-color: #76d21d;
}
.switch input[type="checkbox"] {
  cursor: pointer;
  height: 10px;
  left: 12px;
  position: absolute;
  top: 8px;
  -webkit-transition: left 0.05s ease-in-out;
  -moz-transition: left 0.05s ease-in-out;
  -o-transition: left 0.05s ease-in-out;
  -ms-transition: left 0.05s ease-in-out;
  transition: left 0.05s ease-in-out;
  width: 10px;
}
.switch.checked input[type="checkbox"] {
  left: 38px;
}
.switch input:before {
  background: #fff;
  background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f0f0f0));
  background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  content: '';
  height: 18px;
  position: absolute;
  top: -5px;
  left: -9px;
  width: 26px;
}
.switch input:after {
  background: #f0f0f0;
  background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #fff));
  background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
  background: linear-gradient(to bottom, #f0f0f0 0%, #fff 100%);
  border-radius: 10px;
  content: '';
  height: 12px;
  margin: -1px 0 0 -1px;
  position: absolute;
  width: 12px;
}
.switch .icon-ok,
.switch .icon-remove {
  line-height: 28px;
  text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2);
  margin: 0 9px;
}
.switch .icon-ok {
  float: left;
}
.switch .icon-remove {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><labelclass="switch checked">
  <i class="icon-ok"></i>
  <i class="icon-remove"></i>
  <input type="checkbox" checked>
</label>
<label class="switch">
  <i class="icon-ok"></i>
  <i class="icon-remove"></i>
  <input type="checkbox">
</label>

javascript jquery

asked by anonymous 07.06.2016 / 19:49

1 answer

I can not send email using android studio Count characters in a string from a search done in the string itself

score 1 · Accepted Answer

Try using these functions here:

$(function() {

  $('.switch').on('change', function(){
    $(this).toggleClass('checked');
    var input = $(this).find('input');
    input.attr('disabled', true); //desativa o botão

    var data = { name: "John", time: "2pm" }; //seus dados vão aqui

    var jqxhr = $.post('http://suaurl.com', data);

    jqxhr.done(function() {}); //código de sucesso

    jqxhr.fail(function() {}); //código de erro

    jqxhr.always(function() {
      input.attr('disabled', false);
    }); //Sempre vai ser executado depois da promisse

 });

});