Question

我一直在尝试使这些功能按顺序运行，第一个使用onclick，第二个使用ID。我想做的是运行“加载”脚本，然后在“加载”超时后显示“结果”。预先感谢您的帮助。

HTML：

<input type="button" id="btn_copy" onclick="show()" />
</span><label>Result:</label>
<span type="text" id="result_paste"><img id="loading" src="ajax-loader.gif" style="display: none"></span>
<input type="text" id="result_copy">

JS：

function show() {
    document.getElementById("loading").style.display = "block";
    setTimeout("hide()", 1000);
}

function hide() {
    document.getElementById("loading").style.display = "none";
}

$(function result() {
    $('#btn_copy').on('click', function () {
        var get_val = $('#result_copy').val();
        if (!get_val) {
            alert("Please Enter Some Value");
            return false;
        }
        $('#result_paste').text(get_val);
    });
});

Answer 1

将setTimeout("hide()", 1000)更改为setTimeout(hide, 1000)

Answer 2

function show() {
  console.log('show')
  document.getElementById("loading").style.display = "block";
  setTimeout(() => hide(), 1000);
}

function hide() {
  console.log('hide')
  document.getElementById("loading").style.display = "none";
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<input type="button" id="btn_copy" onclick="show()" value="button">
</span><label>Result:</label>
<span type="text" id="result_paste"><img id="loading" src="ajax-loader.gif" style="display: none"></span>

Answer 3

尝试切换

setInterval("hide()", 1000);

通过

setInterval(hide(), 1000);

Answer 4

首先，您的按钮上有2个点击监听器-一个在html中，另一个在JS中。通常这不是一个好主意，所以让我们删除html。

比方说，您需要将函数而不是字符串传递给setTimeout：setTimeout(hide, 1000)

最后，点击的逻辑应该是：

隐藏结果容器并显示加载图像。
计划在1秒钟内隐藏图像并显示容器。
实际上将值放入容器中。

这是一个代码段：

function showLoading() {
    document.getElementById("result_paste").style.display = "none";
    document.getElementById("loading").style.display = "block";
}

function showResult() {
    document.getElementById("result_paste").style.display = "block";
    document.getElementById("loading").style.display = "none";
}

$(function init() {
    $('#btn_copy').on('click', function () {
        var get_val = $('#result_copy').val();
        if (!get_val) {
            alert("Please Enter Some Value");
            return false;
        }
        
        showLoading();
        setTimeout(showResult, 1000);
        $('#result_paste').text(get_val);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="result_copy">
<input type="button" id="btn_copy" value="OK" />
<br/>
<label>Result:</label>
<div type="text" id="result_paste"></div>
<img id="loading" src="ajax-loader.gif" alt="loading" style="display: none">

（或者这是一个小提琴：https://jsfiddle.net/aofj25bv/3/）

运行JS函数按顺序运行onclick

4 个答案: