让 setTimeout 自己调用，直到条件为真答案

【问题标题】：Make setTimeout Call Itself, Until Condition is True让 setTimeout 自己调用，直到条件为真
【发布时间】：2011-05-05 12:25:13
【问题描述】：

我在表单中有一个输入字段，该类动态变化，具体取决于从“foo”到“foo bar”再到“foo”的 ajax 脚本（我无法修改）。我想修改字段的样式，当它的长度> 0时，它的值不包含“nid”并且它的类不是“bar”。我的第一个想法是有一个 setTimeout，每次输入字段的类是“bar”时都会调用它，直到它是“foo”。但我不知道这是否是好的做法，也不知道如何去做……

【问题讨论】：

标签： javascript jquery drupal autocomplete settimeout

【解决方案1】：

最简单的方法是在元素上绑定 change 或 keydown 事件以捕获字段内容是否匹配。

如果匹配，则添加一个类 fx baz，如果不匹配，则删除该类。

这将使您可以使用 CSS 设置元素的样式。使用类 bar 制定一个规则，该规则将覆盖类 baz 的规则。

【讨论】：

【解决方案2】：

使用keyup输入事件field

【讨论】：

您的答案只回复了 3 个条件中的 1 个…… »我想修改字段的样式，当它的长度大于 0 时，它的值不包含“nid”并且它的类不是“酒吧””。尤其是class-Problem让我头脑混乱……

【解决方案3】：

这样做很好。或者您可以使用 setInterval 重复触发，然后在满足条件后调用 clearInterval。

【讨论】：

【解决方案4】：

您可能想查看my jQuery plugin 以检测用户输入。它在所有主要浏览器中标准化 HTML5 oninput 事件，因此它可以检测来自键盘的输入、拼写更正、粘贴、拖放等。

使用该插件，您的代码可能如下所示：

$("#myInput").input(function () {
    var $this = $(this), val = this.value;
    if (val.length && val.indexOf("nid") === -1 && !$this.hasClass("bar"))
        $this.css("color", "red");
    else
        $this.css("color", "green");
});

工作演示：http://jsfiddle.net/hVDP8/

oninput 比使用计时器或onkeyup 事件有很多好处，例如在屏幕上绘制新值之前执行代码。事实上，它非常适合这种情况。

【讨论】：