нужна помощь по поводу settimeout () jquery - PullRequest
Новая
       19

нужна помощь по поводу settimeout () jquery

0 голосов
/ 02 октября 2018

Вот мой HTML.Я хочу показать конкретный абзац, когда я выберу другой вариант.Также хочу показать загрузчик перед показом каждого абзаца.предположим, что когда я выберу Алжир из списка выбора, он должен показывать первый загрузчик, через несколько секунд загрузчик должен скрыть и показать конкретный абзац, который содержит id = "algeria".

<select id="oh-select">
    <option value="algeria">Algeria</option>
    <option value="australia">Australia</option>
    <option value="brazil">Brazil</option>
    <option value="brunei">Brunei</option>
    <option value="cameroon">Cameroon</option>
    <option value="canada">Canada</option>
</select>

<div id="oi-loader"> Loading</div>

<p class="nothing" id="algeria">Algeria</p>
<p class="nothing" id="australia">Australia</p>
<p class="nothing" id="brazil">Brazil</p>
<p class="nothing" id="brunei">Brunei</p>
<p class="nothing" id="cameroon">Cameroon</p>
<p class="nothing" id="canada">Canada</p>

Проблема в том, что если вы хотите показать абзац с помощью setTimeout () через несколько секунд после изменения, он не работает. Но без setTimeout () он работает частично.Вот то, что я написал: 

 $(document).ready(function(){

    $("#oi-loader").hide();
    $('.nothing').hide();

    $('#oh-select').change(function() {
        $('.nothing').hide();
        $("#oi-loader").show();

        setTimeout(function() {
                $("#oi-loader").hide();
            }, 3000);

            setTimeout(function() {
                $("#" + $(this).val()).show();
            }, 4000);

        });

    });

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Не нужно использовать функцию setTimeout () дважды, вы можете написать этот код как: 

$(document).ready(function(){                
            $("#oi-loader").hide();
            $('.nothing').hide();

            $('#oh-select').change(function() {                     
                var curEle = $(this).val();
                $("#oi-loader").show();
                $('.nothing').hide();
                setTimeout(function() {
                    $("#" + curEle).show();
                    $("#oi-loader").hide();
                }, 4000);                
            });
        });
0 голосов
/ 02 октября 2018

Назначьте $(this).val() переменной, чтобы избежать изменения ее значения путем изменения ее функционального контекста. 

$(document).ready(function(){
    $("#oi-loader").hide();
    $('.nothing').hide();

    $('#oh-select').change(function() {

        // assigning this to a variable
        var a = $(this).val() 

        $('.nothing').hide();
        $("#oi-loader").show();

        setTimeout(function() {
                $("#oi-loader").hide();
            }, 3000);

        setTimeout(function() {

        // using variable
                $("#" + a).show();
            }, 4000);

        });

    });
...