延迟执行函数

Question

我有以下全局jQuery函数，但在页面加载时，我想在1000毫秒延迟后执行它。我的语法有问题吗？我知道延迟总是在函数之前。但它没有响应。

全局函数：

function showpanel() {     
       $(".navigation").hide();
       $(".page").children(".panel").fadeIn(1000);
    ;}

执行函数：

parallax.about.onload=function(){
    $('#about').delay(3000).showpanel();
};

- Joe Isaacson

---

这就是你要找的，希望能有所帮助：）https://dev59.com/X2435IYBdhLWcg3wmxTz - Tats_innit

第一个明显的问题是你试图将showpanel作为另一个对象的方法调用（在这种情况下，是由delay()调用返回的jQuery对象）。但是你已经将showpanel声明为一个简单的、可直接访问的函数，而不是任何对象的方法。JavaScript不是这样工作的。 - BobS

Answer 1

$(document).ready(function() {

  // place this within dom ready function
  function showpanel() {     
    $(".navigation").hide();
    $(".page").children(".panel").fadeIn(1000);
 }

 // use setTimeout() to execute
 setTimeout(showpanel, 1000)

});

更多内容请参见此处

- thecodeparadox

Answer 2

我搜索后发现以下网址中的解决方案要比原先的更好。

http://www.tutorialrepublic.com/faq/call-a-function-after-some-time-in-jquery.php

值得一试。

它将您给定的函数添加到要在匹配元素上执行的函数队列中，该元素当前为this。

 $(this).delay(1000).queue(function() {

     // your Code | Function here
     
     $(this).dequeue();
  
  });

然后在匹配的元素上再次执行队列中的下一个函数，该元素当前为this。

--编辑[可能解释dequeue命令的原因]

看一下这个命令

我们命令jQuery引擎将一个函数添加到内部队列中，然后在特定的时间之后命令它调用该函数，但是到目前为止，我们从未告诉它从引擎中退出。对吧？然后在所有事情都完成后，我们手动从jQuery引擎中退出。我希望这个解释能够有所帮助。

- ebrahim.mr

---

你能否概括解决方案并解释其工作原理？仅仅链接到一个解决方案并不理想，因为该链接在未来某个时候可能会失效... - devlin carnate

@devlincarnate 我更新了这篇文章。请阅读并查看是否易于理解。希望能对你有用。 - ebrahim.mr

请问需要翻译的是：This doesn't explain what queue does or why dequeue is necessary. What purpose does dequeue serve? I wouldn't expect the function to execute more than once, so why dequeue it? - Triynko

$('#main > ul').delay(100).queue(function () { $(this).attr('data-uk-grid', 'masonry: true; parallax: 150;').dequeue() }); $('#main > ul').delay(1).queue(function () { $(this).removeClass('uk-grid uk-flex-top uk-flex-wrap-top').dequeue() }); - Olivier

仍然没有解释为什么需要出队？ - Niklas

@Niklas 我更新了帖子，请看一下。 - ebrahim.mr

Answer 3

你可以在jQuery中添加超时函数（3秒后显示警报）:

$(document).ready(function($) {
    setTimeout(function() {
     alert("Hello");
    }, 3000);
});

- Prince Patel

Answer 4

这个答案仅有用于理解如何使用JQuery的delay函数制作延迟效果。

想象一下，你有一个提示框，并且你想要设置提示框的文本，然后显示提示框，在几秒钟后隐藏它。

以下是简单的解决方案：

$(".alert-element").html("I'm the alert text").fadeIn(500).delay(5000).fadeOut(1000);

---

这非常简单：

1. .html() 会改变 .alert-element 的文本内容
2. .fadeIn(500) 会在 500 毫秒后淡入
3. JQuery 的 delay(5000) 函数会在调用下一个函数之前延迟 5000 毫秒
4. .fadeOut(1000) 在语句末尾将淡出 .alert-element

- Mohammad Kermani

Answer 5

您可以简单地使用jQuery的delay()方法来设置延迟时间间隔。

HTML代码：

  <div class="box"></div>

JQuery 代码：

  $(document).ready(function(){ 
    $(".show-box").click(function(){
      $(this).text('loading...').delay(1000).queue(function() {
        $(this).hide();
        showBox(); 
        $(this).dequeue();
      });        
    });
  });

你可以在这里看到一个例子：如何在jQuery中延迟一段时间后调用函数

- thomas