根据另一个元素的状态切换DOM元素值的最有效方法是什么？

Question

想象一下,我们有一个文本字段,在每个keydown事件上执行以下代码:

if( $('#my_input').val() == '' )
  $('#my_span').html('my input is blank');
else
  $('#my_span').html('My input is not blank');

显然,我们正在执行可能将某事物(#my_span元素)的状态设置为已经存在的代码,这似乎效率低下.但我很好奇这个替代方案是什么？添加更多支票,例如:

if ( $('#my_input').val() == '' ){
  if ( $('#my_span').html() != 'my input is blank' )
       $('#my_span').html('my input is blank');
}
else if ( $('#my_span').html() != 'My input is not blank' )
          $('#myspan').html('My input is not blank');

后者更有效率吗？在我看来它更"正确",但显然它是更多的代码,我不确定它比第一个例子更有效.

我知道前者总是涉及DOM操作,这将考虑计算相对效率,但我之前在非DOM相关代码中遇到过这样的情况,所以想知道在所有情况下什么是最好的方法.在将其设置为新值之前,是否应始终对某些值进行额外检查？

编辑:

我的最终版本实际上使用了这里的答案的组合,所以感谢所有的回复.总而言之,我现在:

• 在闭包中缓存jquery对象
• 使用state来确定对新状态的分配

另外,keydown上的setTimeout是一种非常好的方法来立即获取输入字段值.再次感谢.

Answer 1

我会缓存jQuery对象并使用布尔值来存储状态,而不是html在不需要时调用:

(function(){
   var i = $('#my_input'), s=$('#my_span'), blank, check = function() {
      if (i.val()=='') {
         if (blank!==true) s.html('my input is blank');
         blank = true;
      } else {
         if (blank!==false) s.html('my input is not blank');
         blank = false;
      }
   };
   i.keyup(check);
   check(); // so that the span is initially filled
})();

请注意,你需要的是不是keydown,但是keyup,这样就得到了事件之前输入的值发生变化.