javascript - 等待变量改变值

Question

我有一个文本框，每次用户按下一个键时，我都会计算该字段的新长度以查看仍有多少字符可用。 根据这个数字，我:

1. 检查是否应该启用“发送”按钮
2. 检查显示长度的计数器应该是红色还是黑色(在推特上)

但是现在我遇到了一个问题；在每个 keydown 事件中，我都会:

remaining = 100 - count;

if (remaining > 9)
{
    //blue counter; send is activated
    //"if counter.class == red then counter.class = blue..."
    //"send.off('click'); send.on('click', sendmessage)..."
}
else if ((remaining <= 9) && (remaining >= 0))
{
    //red counter; send is activated
}
else //remaining <0
{
    //red counter; send is deactivated
}

每次用户按下一个键时，都会执行 3 个 blocs 中的一个...难道没有办法只在变量更改“zone”时执行 blocs ( ]∞, 9[; [9,0]; ]0; -∞[) ?

Answer 1

毫无疑问，这可以做得更优雅，但简单的答案就是记住长度的先前值:

var prevCount = 10;

function checkLength() {
   var count = // your logic to get current count here

   if (count > 9 && prevCount <=9) {
      // count has changed to > 9
   } else if (count <=9 && count >= 0 && (prevCount > 9 || prevCount < 0) {
      // count has changed to <=9
   } else if (count < 0 && prevCount >= 0) {
      // count has changed to < 0
   }

   prevCount = count;
}

将 prevCount 初始化为屏幕加载时有意义的任何值...

(附:计数怎么可能小于零？)

更新:由于您已确认您正在使用 jQuery，因此您可以执行类似的操作(假设“黑色”和“红色”是样式表中具有适当颜色和格式设置的类):

$(document).ready(function() {
    var limit = 100,
        $rem = $("#remaining").addClass("black"),
        $send = $("input");

    $("textarea").on("keydown keyup", function() {
        var len = $(this).val().length,
            remaining = limit - len;

        $rem.text(remaining);
        $send.prop("disabled", len === 0 || remaining < 0);

        if (remaining <=9 && $rem.hasClass("black")
            || remaining > 9 && $rem.hasClass("red"))
            $rem.toggleClass("black red");
    }).keydown();
});​

如果没有文本或文本太多，则禁用发送按钮；仅在必要时将类别从黑色更改为红色。 (您也可以将黑色设置为默认值，只需打开和关闭“红色”类即可。)

演示:http://jsfiddle.net/ZAjez/