如何以return开头的随机文本生成器函数？

Question

我使用数组构建了这个随机文本生成器，但是用户只能每 30 秒单击一次按钮，并且在此期间处于禁用状态。当显示数组中的项目并且禁用功能完成后，如何淡出显示问题 "What is your name?"

function GetValue() {
    var myarray= new Array("Item1", "item2", "item3" );
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("message").innerHTML=random;
} 

$(function() {
    $("button").click(function() {
        $("button").attr("disabled", "disabled");
        setTimeout(function() {
            $("button").removeAttr("disabled");      
        }, 30000);
    });
});

<!-- html--> 
<button type="button" id="btnSearch" href="#" class="btn btn-block tellme"  onclick="GetValuegirl();" > generate text </button>

<p id="message"  >What is your name?</p>

Answer 1

你可以这样做：

var question = document.getElementById("message").innerHTML;

function changeTextAndFade($element, text){
 $element.fadeOut( function(){
   $(this).text(text).fadeIn();
  })
}

function GetValue() {
  var myarray = new Array("Item1", "item2", "item3");
  var random = myarray[Math.floor(Math.random() * myarray.length)];
  changeTextAndFade($("#message"), random);
}

$(function() {
  $("button").click(function() {
    $("button").attr("disabled", "disabled");
    setTimeout(function() {
      $("button").removeAttr("disabled");
      changeTextAndFade($("#message"), question);
    }, 3000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btnSearch" href="#" class="btn btn-block tellme" onclick="GetValue();">generate text</button>
<p id="message">What is your name?</p>

Answer 2

像这样。您不需要额外的点击事件处理程序。

function GetValue() {
    var myarray= new Array("Item1", "item2", "item3" );
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    $("#message").html(random);
    $("button").prop('disabled', true);
    setTimeout(function() {
        //don't use removeAttr, this completely removed the attribute fromt the element. meaning it cant be true.
        $("button").prop('disabled', false);        
        $("#message").hide(0).html('What is your name?').fadeIn();
    }, 30000);
} 

<!-- html--> 
<button type="button" id="btnSearch" href="#" class="btn btn-block tellme"  onclick="GetValue();" > generate text </button>

<p id="message"  >What is your name?</p>

如何以return开头的随机文本生成器函数？

how to return to the beginning of a function of a random text generator?

javascript

generator