Запуск функций JS выполняется последовательно по нажатию

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

Во-первых, у вас на кнопке 2 слушателя щелчка - один в html, другой в JS.Обычно это не очень хорошая идея, поэтому давайте удалим html one.

Чем, как было указано, нужно передать функцию, а не строку, в setTimeout: setTimeout(hide, 1000)

И, наконец, логика нажатия должна быть следующей:

1. Скрыть контейнер результатов и показать загрузочное изображение.

2. План скрытия изображения и показаконтейнер за 1 секунду.

3. Фактически поместите значение в контейнер.

Вот фрагмент:

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/)

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

Изменить setTimeout("hide()", 1000) на setTimeout(hide, 1000)