Question

我想在一个函数中使用jquery中的timeOut函数两次，例如：

$('.button').click(function() {
    setTimeout(function(){
        Do something
    },10000); 
    setTimeout(function(){
        Do something
    },10000); 
});

以下是我的代码示例：https://jsfiddle.net/Ln74dLp2/3/

如何将两个超时链接在一起，而不是并行运行？

Answer 1

我认为你有错误配置的东西。你的代码工作正常（虽然我把演示的超时时间缩短到1秒）：

＆＃13;

$('#one').hide();
$('#two').hide();
$('.button').click(function() {
  setTimeout(function() {
    $('#one').show();
    setTimeout(function() {
      $('#two').show();
    }, 1000);
  }, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p id="one">
    Here is the first sentence
  </p>
  <p id="two">
    Here is the second sentence
  </p>
</div>
<button class="button">
  click
</button>

＆＃13;

第二种选择，可能有点过分，但是如果你最终得到很多这些元素，你可以使用一个函数迭代所有元素，将每个元素延迟5秒的倍数：

＆＃13;

$('#one').hide();
$('#two').hide();
$('.button').click(function() {
    $('#one, #two').each(function(index) {
    	$(this).delay(5000 * (index + 1)).queue(function() { $(this).show(); });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p id="one">
    Here is the first sentence
  </p>
  <p id="two">
    Here is the second sentence
  </p>
</div>
<button class="button">
  click
</button>

＆＃13;

Answer 2

如果您希望第二个函数在第二个函数执行之前执行，请执行此操作

$('.button').click(function() {
        setTimeout(function(){
            Do something
            setTimeout(function(){
               Do something 
            },10000); 
        },10000); 

    });

如何在彼此之后运行javascript超时而不是并行？

2 个答案: