标签: jquery-chaining

我何时应该使用jQuery deferred的"then"方法,何时应该使用"pipe"方法?

jQuery Deferred有两个函数可用于实现函数的异步链接:

then()

deferred.then( doneCallbacks, failCallbacks ) Returns: Deferred

doneCallbacks解析Deferred时调用的函数或函数数组.
failCallbacks拒绝延迟时调用的函数或函数数组.

pipe()

deferred.pipe( [doneFilter] [, failFilter] ) Returns: Promise

doneFilter解析Deferred时调用的可选函数.
failFilter拒绝Deferred时调用的可选函数.

我知道then()已经存在了一段时间,pipe()因此后者必须增加一些额外的好处,但正是这种差异恰恰在于我.两者都采用了几乎相同的回调参数,尽管它们的名称不同,返回a Deferred和返回a 之间的区别Promise似乎很小.

我已经一遍又一遍地阅读官方文档,但总是发现它们太"密集"而无法真正地包围我的搜索已经找到了很多关于这个或另一个特征的讨论,但我没有发现任何真正澄清不同的东西每个人的利弊.

那么什么时候使用then它更好,pipe什么时候使用更好?


加成

Felix的出色答案确实有助于阐明这两个功能的区别.但我想知道是否有时候功能性then()比那更好pipe().

很明显,它pipe()then()以前更强大,似乎前者可以做后者可以做的任何事情.使用的一个原因then()可能是它的名称反映了它作为处理相同数据的一系列函数的终止的作用.

但是有一个用例需要then()返回由于它返回一个新的而Deferred无法完成的原始文件吗?pipe()Promise

jquery asynchronous decoupling jquery-chaining jquery-deferred

96
推荐指数
3
解决办法
4万
查看次数

Jquery承诺链

我有一个简单的事件链:

  1. 从metaData表中获取列(异步)
  2. 加载选定的列(异步)
  3. 渲染列表

我曾经只是链接这些函数,每个函数在完成后调用下一个函数.然而,它不是很明显(getColumnsFromMeta正在填充视图中的结果).因此,为了清晰和重复使用代码,我想重构这些JQuery Promises.我以前用过承诺.但是我如何连锁超过两个?getColumnsFromMeta ().then(loadSourceFromDatabase /*some arguments*/) //.then(renderList)?;

这是一个例子getColumnsFromMeta:

var getColumnsFromMeta = function(id)
{
    var sql,
        dfd;

    dfd = $.Deferred();

    var onSuccess = function(tx, result)
    {
        var columns = [];

        for (var i = 0; i < result.rows.length; i++) 
        {
            columns.push(result.rows.item(i).Column);
        }

        dfd.resolve(columns);
    };

    var onError = function(tx, error)
    {
        dfd.reject(error);
    };

    sql = "SELECT Column FROM Meta WHERE id = ?";

    database.query(sql, [id], onSuccess, onError);

    return dfd.promise();
};
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-chaining promise jquery-deferred

13
推荐指数
1
解决办法
1万
查看次数

编写一个返回值的jQuery插件

我正在编写一个jQuery插件,在某些情况下存储一些数据.

我想以一种非常灵活的方式编写它,我可以更改输入参数以获取插件存储的某些值.

说明:

当我打电话$("#any").myPlugin(),我的插件初始化创建div和一些a内.单击a.index()使用该.data()方法存储它.如果我打电话,$("#any").myPlugin("getSelection")那么我想得到存储的值.data().

我尝试过的:

(function ($) {
    $.fn.myPlugin = function (action) {
        if (action == null) action = "initialize";

        return this.each(function ($this) {
            $this = $(this);

            if (action == "initialize") {
                $this.html('<div></div>');
                var div = $("div", $this);

                div.append('<a>A</a>').append('<a>B</a>').append('<a>C</a>');

                div.children("a").each(function (i) {
                    $(this).click(function (event) {
                        // Here I store the index.
                        $this.data($(this).index());
                        event.preventDefault();
                        return false;
                    });
                });

                return $this;
            } else if (action == …
Run Code Online (Sandbox Code Playgroud)

jquery jquery-plugins chaining jquery-chaining

6
推荐指数
1
解决办法
8564
查看次数

将'if'逻辑添加到jQuery链中

假设我有以下jQuery:

// pseudocode  :
$(this)
    .doSomething
    .doSomething
    .selectSomething
        .doSomething
        .animate({ 
            opacity: 1
        }, 150)
        .end()
    .selectSomethingElse
        .doSomething
Run Code Online (Sandbox Code Playgroud)

我希望以上执行.但是,如果浏览器是IE,我不希望动画部分执行(由于IE无法使用透明PNG动画对象并保留PNG透明度).

反正有没有维护漂亮的链式jquery语法,但不知何故基于一些if逻辑跳过动画部分(在这种情况下测试IE)?

jquery jquery-chaining

3
推荐指数
1
解决办法
1299
查看次数

链接find()到val()

有没有办法连锁find()追随val()

例如,给定以下代码,我想清除所有输入的值,但只切换required具有以下类的输入的属性.required:

$('#some-selector')
    .find(':input')
    .val('')
    .find('.required')
    .prop('required', someBoolean);
Run Code Online (Sandbox Code Playgroud)

jQuery文档中可以看出,它val()返回一个字符串,数字或数组.对我来说似乎find()不会对此返回值起作用,因为我认为它需要一个jQuery对象.

所以有几个问题:

  1. 我在jQuery理解方面的差距在哪里,我试图链接find()val()
  2. 我将如何完成我的要求:我想清除那些有课程的人所需的所有输入和切换.required.

谢谢!

javascript jquery jquery-chaining

2
推荐指数
1
解决办法
51
查看次数

jQuery .animate/.each chaining

我正在尝试将匹配的东西组合起来:

$(".item").each(function(i) {
    //animation here
});
Run Code Online (Sandbox Code Playgroud)

使用jQuery固有的链接功能,强制动画等待上一个动画完成,例如:

$(".item").each(function(i) {
    $(this).animate({marginLeft:"0"}, 60);
});
Run Code Online (Sandbox Code Playgroud)

然后在动画完成后触发.load函数.基本上,我想按顺序淡出四个项目[一个接一个,而不是一次全部],然后将四个新项目加载到同一个div中,替换前四个.

我怎样才能以可重用/可变的方式做到这一点?

jquery jquery-chaining jquery-animate

0
推荐指数
1
解决办法
8440
查看次数