如何使用 JQuery 链接或排队自定义函数? [英] How do I chain or queue custom functions using JQuery?

问题描述

我有多个函数可以对 HTML 的不同部分执行不同的动画.我想链接或排队这些函数，以便它们按顺序而不是同时运行动画.

I have multiple functions the do different animations to different parts of the HTML. I would like to chain or queue these functions so they will run the animations sequentially and not at the same time.

我正在尝试按顺序自动执行多个事件，让用户看起来好像一直在点击不同的按钮或链接.

I am trying to automate multiple events in sequence to look like a user has been clicking on different buttons or links.

我可能可以使用回调函数来做到这一点，但随后我必须从不同的函数中提取所有动画并以正确的模式重新组合.

I could probably do this using callback functions but then I would have to pull all of the animations from the different functions and regroup in the right pattern.

jquery排队"有帮助吗?我无法理解队列的文档.

Does the jquery "queue" help? I couldn't understand the documentation for the queue.

示例，JQuery:

 function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
    Two();

HTML:

    <div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
    <div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>

谢谢.

我用 timers 尝试过，但我认为有更好的方法.

I tried it with timers but I thought there is a better way to do it.

编辑#2:

让我说得更具体一点.我有多个功能可以点击&页面不同元素上的悬停事件.通常这些函数彼此无关(它们不相互引用).我想在不更改现有函数代码的情况下模拟用户经历这些事件.

Let me be more specific. I have multiple functions bound to click & hover events on different elements of the page. Normally these functions have nothing to do with each other ( they don't reference each other). I would like to simulate a user going through these events without changing the code of my existing functions.

推荐答案

jQuery Queue 代码的文档并不完整，但基本思想是这样的:

The jQuery Queue code is not as well documented as it could be, but the basic idea is this:

$("#some_element").queue("namedQueue", function() {
  console.log("First");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Second");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Third");
});

$("#some_element").dequeue("namedQueue");

如果你运行这段代码，你会在控制台看到First"，暂停1s，在控制台看到Second"，又暂停1s，最后在控制台看到Third".

If you run this code, you will see "First" in the console, a pause of 1s, see "Second" in the console, another pause of 1s, and finally see "Third" in the console.

基本思想是您可以将任意数量的命名队列绑定到一个元素.您可以通过调用 dequeue 从队列中删除一个元素.您可以根据需要手动多次手动执行此操作，但如果您希望队列自动运行，您只需在排队函数中调用 dequeue 即可.

The basic idea is that you can have any number of named queues bound to an element. You remove an element from the queue by calling dequeue. You can do this yourself manually as many times as you want, but if you want the queue to run automatically, you can simply call dequeue inside the queued up function.

jQuery 中的动画都在名为 fx 的队列中运行.当您为元素设置动画时，它会自动将新动画添加到队列中，如果当前没有动画正在运行，则调用 dequeue.如果您愿意，您可以将自己的回调插入到 fx 队列中；您只需要在最后手动调用 dequeue(与任何其他队列使用一样).

Animations in jQuery all run inside a queue called fx. When you animate an element, it automatically adds the new animation on the queue and calls dequeue if no animations are currently running. You can insert your own callbacks onto the fx queue if you wish; you will just need to call dequeue manually at the end (as with any other queue use).

这篇关于如何使用 JQuery 链接或排队自定义函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！