Question

我的代码如下。当我单击搜索按钮时，它进入一个for循环，打印5000次“hi”。在此计算开始之前，我想禁用该按钮。在console.log完成后，我想重新启用此按钮。但由于某种原因，这是行不通的。（更确切地说，虽然我在这里只打印日志，但实际工作涉及各种计算，大约需要5秒才能完成循环使用。）

$("#search").click(function() {

   $("#search").prop("disabled",true);
   $("#search").text("Loading...");

   var i;
   for(i = 0; i < 50000; i++)
       console.log("hi");


   $("#search").prop("disabled",false);
   $("#search").text("Finished...");
});

https://jsfiddle.net/gs793zhx/

Answer 1

尝试使用期限设置为.delay()，1，.queue()，.promise()

的$.Deferred()

＆＃13;

$("#search").click(function() {
  $(this).prop("disabled", true)
    .text("Loading...")
    .css("color", "red")
    .delay(1, "p")
    .queue("p", function(next) {
      next()
    })
    .dequeue("p")
    .promise("p")
    .then(function() {
      var elem = this;
      return $.Deferred(function(d) {
        var i = 0, max = 50000;
        for (;i < max; i++) {
          console.log("hi");
        }
        if (i === max) {
          d.resolveWith(elem, [i])
        }
      }).promise()
    }).then(function(data) {
      console.log(this, data);
      $(this).prop("disabled", false)
      .css("color", "blue")
      .text("Finished...");
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button type="button" id="search" class="btn btn-primary" style="width:100px; height:30px;">SEARCH</button>

＆＃13;

jsfiddle https://jsfiddle.net/gs793zhx/1/

Answer 2

使用$("#search").attr("disabled","disabled");和$("#search").removeAttr("disabled");代替

Answer 3

问题在于浏览器的效果是hi次50000次。{/ p>

您可以将日志放入js变量并将变量转储到控制台中。

＆＃13;

var btn = $("#search");
btn.click(function() {
  btn.prop("disabled", true);
  btn.text("Loading...");
  var log = [];
  for (var i = 0; 50000 > i; i++)
    log.push("i: " + i);
  console.log(log);
  btn.prop("disabled", false);
  btn.text("Finished...");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='search'>Search</button>

＆＃13;

Answer 4

$("#search").click(function() {

$("#search").prop("disabled",true);
$("#search").text("Loading...");


var i;
for(i = 0; i < 50000; i++) {
    console.log("hi");
}
if(i==50000-1)
{
    $("#search").prop("disabled",false);
    $("#search").text("Finished...");       
}
});

javascript按钮禁用并在计算后重新启用不起作用

4 个答案: