如何链或使用JQuery排队自定义函数？(How do I chain or queue custo

2019-06-25 09:20发布

站内文章 / 移动开发
28 0 0

我有多个功能做不同的动画到HTML的不同部分。 我想链或排队这些功能所以他们会在同一时间顺序，而不是运行动画。

我想在序列多个事件自动化，看起来像一个用户已经点击不同的按钮或链接。

我大概可以做到这一点使用回调函数，但后来我不得不把所有的动画从不同的功能，并在正确的模式重组。

请问jQuery的“队列”帮助？ 我不明白的文档队列。

例如，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>

谢谢。

编辑：我试了一下计时器 ，但我想有一个更好的办法做到这一点。

编辑＃2：

让我更具体。 我有一个绑定点击和悬停在页面的不同元素事件的多个功能。 通常，这些功能都无关，与对方（他们不相互引用）。 我想模拟一个用户通过这些活动会在不改变我现有的功能代码。

Answer 1:

jQuery的队列代码没有得到很好的记录，因为它可以，但基本的思路是这样的： 

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

如果你运行这段代码，你会看到“第一”在控制台中，1秒的停顿，请参见“二”在控制台中，1秒的又过了一会，终于看到“三”在控制台中。

其基本思想是，你可以有任意数量的绑定到一个元素命名的队列中。 您可以通过调用从队列中删除一个元素dequeue 。 只要你想，你可以自己做手工多次，但如果你想在队列中自动运行，你可以简单地调用dequeue的排队功能里面。

jQuery的动画都被称为队列内运行fx 。 当你动画的元素，它会自动将队列中的全新的动画和呼叫出列，如果没有动画当前正在运行。 你可以插入自己的回调到fx队列中，如果你想; 你只需要调用dequeue在结束手动（与任何其他队列使用）。



Answer 2:

我想创建一个函数数组，并添加要排队到它的每一个功能。

然后我会追加一个函数调用它遍历数组，并调用每个函数通过jQuery的事件。

你也许可以创建jQuery的一个非常简单的插件，可以在内部处理这一点。



Answer 3:

假设你要保持One和Two作为单独的功能，你可以这样做： 

function One(callback) {
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
        function(e) { callback(); });
}
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);


Answer 4:

在我的网络的项目之一，我不得不执行的根据发射什么事件动作的各种序列。 我这样做是利用回调（类似访问者模式）。 我创建的对象到包装任何功能或动作组。 然后，我会排队的包装; 阵列工作正常。 当触发的事件，我会遍历数组了，叫我的对象是花了回调专门的方法。 该回调触发了我的迭代继续。

包装一个功能，你需要的知识的应用功能 。 应用函数花费范围的对象和参数数组。 这样，你不需要知道你的包裹功能什么。



Answer 5:

我会跑第二的回调函数： 

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

这将运行两个（）时，第一动画完成，如果你有这样的情况下，定时队列多个动画我使用的jQuery插件定时器来代替的setTimeout（），其中谈到在某些情况下非常方便。



Answer 6:

怎么样只是一些类似的？ 

var f1 = function() {return $(SELECTOR1).animate({ 'prop': 'value' }, 1000)};
var f2 = function() {return $(SELECTOR2).animate({ 'prop': 'value' }, 1000)};
var f3 = function() {return $(SELECTOR3).animate({ 'prop': 'value' }, 1000)};

$.when(f1).then(f2).then(f3);


Answer 7:

一个更安全和100％的工作方式是使用一个变量，如果分支。 在下面的例子中，我们做的4个作业，其需要1秒，作业后我们想要的功能，按F2键运行。 

<html><body>
<div id="a" class="a" />
 <script type="text/javascript">
var jobs = 0;
function f1() {
job(); 
job();
job();
job();    
};

function f2() {
    if(jobs >3)
        l("f2");
};

<!------------------------- ->
function job() {
    setTimeout(function() {
        l("j");
        jobs+=1;
        f2();
    }, 1000);
}
function l(a) {
    document.getElementById('a').innerHTML+=a+"<br />";
};
f1();


</script></body></html>


Answer 8:

真正简单的修复。 

function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000, Two);
    }
    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();
//We no longer need to call Two, as it will be called when 1 is completed.
    //Two();


Answer 9:

至于在2000毫秒已经定义动画的间隔，你可以用延迟第二个电话在2000毫秒： 

One();
SetTimeout(function(){
  Two();
}, 2000);


Answer 10:

下面的工作，如果回调为null不会错误： 

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

var callback = function(){ Two(); };
One(callback);


Answer 11:

@TrippRitter得重视.CALL回调

One = function(callback){
    $('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
        if(typeof callback == 'function'){
            callback.call(this);
        }
    });
}

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

One(function(){ 
    Two();
});

但它是一样执行以下操作

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

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


Answer 12:

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


Answer 13:

复制和粘贴............ 2013年7月9日

<!doctype html>
<html lang="en">
    enter code here<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
    </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>
   $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).addClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").animate({left:'-=200'},1500);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).removeClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      jQuery.queue( $("div")[0], "fx", [] );
      $("div").stop();
    });
</script>

</body>
</html>


Answer 14:

虽然耶胡达·卡茨的答案是技术上是正确的，将臃肿很快有更大更复杂的动画。

我为像您这样的情况下，一个插件，允许排队功能（带停顿的，如果需要恢复）。

演示： https://jessengatai.github.io/okaynowthis.js/

使用okaynowthis.js应该是这样的，以你的问题的解决方案： 

$('window').load(function(){

    // keyframe 1
    $('body').okaynowthis('keyframe',0,function(){
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    // keyframe 2 (with 2 seconds delay from keyframe 1)
    }).okaynowthis('keyframe',2000,function(){
        $('div#animateTest2').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    });

});


Answer 15:

而不是创建一个功能简单的方法是在这里： 

$('#main').animate({ "top": "0px"}, 3000, function()
   {    $('#navigation').animate({ "left": "100px"},  3000, function() 
        {
            alert("Call after first and second animation is completed.");
        })
    }
);

因此，jQuery的默认提供了一个执行功能一个队列。



文章来源: How do I chain or queue custom functions using JQuery?
标签： jquery animation queue chaining
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~