需要有关 settimeout() 的帮助 jquery

Question

这是我的html。当我 select 不同的选项时，我想显示特定的段落。还想在显示每个段落之前显示一个加载程序。假设当我从 select 中 select 阿尔及利亚时，它应该显示第一个加载器，几秒钟后加载器应该隐藏并显示包含 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() 显示段落，那么 working.but 没有 setTimeout() 就无法正常工作。这是 jquery 我写的：

 $(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);

        });

    });

Answer 1

将 $(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);

        });

    });

Answer 2

不需要两次使用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);                
            });
        });

需要有关 settimeout() 的帮助 jquery

need help about settimeout() jquery

selector

jquery-selectors