Javascript 我可以使用不依赖于选择器的自定义jQuery函数进行链接吗？

我想我可能是在做jQuery的失礼。或者一个JavaScript版本。所以，如果我是，请阻止我！：）

情景：

我想创建一个函数，它接受一个字符串和一些其他参数，然后将它们包装到settimeout中。简单的事情，但它比在我的代码上粘贴设置超时要干净得多

看起来是这样的：

function myFunction(text,interval) {
    setTimeout(function(){
        // do a bunch of stuff with the text var
    },interval)
}

$('body')
    .myFunction('string1',1000).delay(500)
    .myFunction('string2',1000).delay(500)
    .myFunction('string3',1000)

很简单。然后我意识到我可能想一起更改多次，要这样做，我就必须将我的调用封装在自己的嵌套setTimeout中，然后我又回到了看起来凌乱的代码中

因此，我想知道是否可以利用jQuery使其在整个代码中看起来更好、更可用

我尝试了这一点，首先制作了自己的自定义jQuery函数：

$.fn.myFunction = function(text,interval) {
    setTimeout(function(){
        // do a bunch of stuff with the text var
    },interval)
}

我想我可以这样称呼它：

function myFunction(text,interval) {
    setTimeout(function(){
        // do a bunch of stuff with the text var
    },interval)
}

$('body')
    .myFunction('string1',1000).delay(500)
    .myFunction('string2',1000).delay(500)
    .myFunction('string3',1000)

这看起来非常好，使重复使用变得更加精简。但是…这根本不起作用。我的问题是:

• 我认为这是jQuery和自定义函数的一种可行的用法，这是正确的吗
• 如果是的话，我在哪里搞砸了我的逻辑
• 最后，在调用链接jQuery函数之前，是否需要始终选择选择器？（我选择“body”只是为了使jQuery链具有典型性，但我显然没有特别针对该jQuery对象做任何事情）

更新

感谢cookie monster的回答，我现在有了一个更新的示例：

  $.fn.myFunction = function(text,interval) {
    return this.queue(function(next) {
         setTimeout(function(){
            console.log(text);
        },interval)
    })
  };

我试着这样称呼它：

$.myFunction（'msg1'，500）.delay（500）.myFunction（'msg2'，500）.delay（500）.myFunction（'msg3'，500）

这样做会产生以下错误：

TypeError: 'undefined' is not a function (evaluating '$.myFunction()')

所以我想也许它还需要一个选择器：

$('body').myFunction('msg1',500).delay(500).myFunction('msg2',500).delay(500).myFunction('msg3',500)

这很有效！。。。但只有一次。它执行函数一次，但在链中的其他2次中不会再次执行。所以，更进一步，但我仍然认为我遗漏了一些重要的概念或语法

更新2

我几乎可以工作的代码的JSBin:

使用

.queue（）

使您的代码使用

.delay（）

来工作

start=Date.now（）
$.fn.myFunction=函数（文本，间隔）{
返回此.queue（函数（下一步）{
setTimeout（函数（）{
log（文本，start-Date.now（））
next（）//这是必需的！
}，间隔时间）
})
}

• 我认为这是jQuery和自定义函数的一种可行的用法，这是正确的吗

是的，只要有一个工具来管理延时代码的有序执行，jQuery就是这样

• 如果是的话，我在哪里搞砸了我的逻辑

唯一缺少的是对代码进行排队，并重新调整jQuery对象

• 最后，在调用链接jQuery函数之前，是否需要始终选择选择器？（我选择“body”只是为了使jQuery链具有典型性，但我显然没有特别针对该jQuery对象做任何事情）

不，选择器只是执行DOM选择。如果jQuery对象中已经有一组元素，则不需要选择DOM。

使用

.queue（）

使代码使用

.delay（）

start=Date.now（）
$.fn.myFunction=函数（文本，间隔）{
返回此.queue（函数（下一步）{
setTimeout（函数（）{
log（文本，start-Date.now（））
next（）//这是必需的！
}，间隔时间）
})
}

• 我认为这是jQuery和自定义函数的一种可行的用法，这是正确的吗

是的，只要有一个工具来管理延时代码的有序执行，jQuery就是这样

• 如果是的话，我在哪里搞砸了我的逻辑

唯一缺少的是对代码进行排队，并重新调整jQuery对象

• 最后，在调用链接jQuery函数之前，是否需要始终选择选择器？（我选择“body”只是为了使jQuery链具有典型性，但我显然没有特别针对该jQuery对象做任何事情）

---

不，选择器只是执行DOM选择。如果jQuery对象中已经有一组元素，则不需要进行DOM选择。

我不明白当您可以只使用

$.fn.delay

时，为什么还要费心执行

setTimeout

start = Date.now()
$.fn.myFunction = function(text,interval) {
    return this.queue(function(next) {
        setTimeout(function(){
            console.log(text, start - Date.now())
            next() // This is mandatory!
        },interval)
    })
}

我会毫不延迟地使用一个函数：

并在需要时添加

.delay

：

$('body')
      .delay(500).myFunction('msg1')
      .delay(500).myFunction('msg2')
      .delay(500).myFunction('msg3');

如果不需要选择任何元素，仍然可以围绕其他对象（如虚拟对象）构造jQuery对象：

$({}).delay(500).myFunction('msg1');

（不能只使用

$.delay（500）.myFunction（'msg1'）

，因为

$

对象不是继承

$.fn

原型的jQuery对象。）

---

我不明白当您可以使用

$.fn.delay

时，您为什么还要费心执行

设置超时

start = Date.now()
$.fn.myFunction = function(text,interval) {
    return this.queue(function(next) {
        setTimeout(function(){
            console.log(text, start - Date.now())
            next() // This is mandatory!
        },interval)
    })
}
我会毫不延迟地使用一个函数：

并在需要时添加
.delay
：

$('body')
      .delay(500).myFunction('msg1')
      .delay(500).myFunction('msg2')
      .delay(500).myFunction('msg3');

如果不需要选择任何元素，仍然可以围绕其他对象（如虚拟对象）构造jQuery对象：

$({}).delay(500).myFunction('msg1');

（不能只使用
$.delay（500）.myFunction（'msg1'）
，因为
$
对象不是继承
$.fn
原型的jQuery对象。）

如果它不依赖于选择器，那么为什么要使用jQuery呢？您可以将它附加到
$
而不是
$.fn
，但这只是jQuery命名空间下的一个普通函数。如果有动画队列，
delay
也可以工作。@elclans回答“为什么使用jQuery？”=我已经在使用它了，我认为这会导致调用它的可读性和可重用性更高，因为它是一个函数，在这个特定的项目中会按顺序大量使用。关于延迟，也许这是我所理解的概念之一