在 OnKeyUp 事件问题中引用 Javascript 变量答案

【问题标题】：Referencing Javascript variable in OnKeyUp event problem在 OnKeyUp 事件问题中引用 Javascript 变量
【发布时间】：2011-05-05 00:12:09
【问题描述】：

我已经声明了两个变量，COURSE_ID_List 和 COURSE_ID_timerId。然后将它们作为参数从 OnKeyUp 事件传递给 SetFilter 函数。

如果列表未定义，它应该初始化它。问题是列表始终未定义，因此我假设 OnKeyUp 事件中使用的 COURSE_ID_List 是按值传递的，而不是通过引用传递的。我该如何解决这个问题？

谢谢

<script type="text/javascript"> 

function SetFilter(ddl, value, list, timerId) {
  if (list == undefined)
    list = new ListFilter(ddl);
  clearTimeout(timerId);
  timerId = setTimeout(function() { list.SetFilter(value);}, 1500);
}

var COURSE_ID_List;
var COURSE_ID_List_timerId;

</script>

<input name="Course" type="text" id="COURSE_ID" onKeyUp="SetFilter('COURSE_ID', this.value, COURSE_ID_List, COURSE_ID_List_timerId);" />

【问题讨论】：

请注意，keyup 事件并不是检测用户输入的好方法。您可以使用其他事件来捕获其他类型的输入，例如粘贴或拖放。见whattheheadsaid.com/2010/09/…

标签： javascript pass-by-reference

【解决方案1】：

更改为...

function SetFilter(ddl, value) { 
  if (COURSE_ID_List == undefined) 
    COURSE_ID_List = new ListFilter(ddl); 
  clearTimeout(COURSE_ID_List_timerId); 
  COURSE_ID_List_timerId = setTimeout(function() { COURSE_ID_List.SetFilter(value);}, 1500); 
}

和

onKeyUp="SetFilter('COURSE_ID', this.value);"

更通用的方法是使用原型设计...

var Lists = { COURSE_ID_List: null, ... };

function SetFilter(ddl, value, list) { 
  if (Lists[list] == null) 
    Lists[list] = new ListFilter(ddl); 
  clearTimeout(COURSE_ID_List_timerId); 
  COURSE_ID_List_timerId = setTimeout(function() { Lists[list].SetFilter(value);}, 1500); 
}

【讨论】：

可能不止列表，例如COURSE_ID_List 和 SUBJECT_ID_List。它目前的工作方式是每个列表都有一个特定的 SetFilter 函数，就像你所做的那样。我只是希望有一种方法可以拥有一个通用的 SetFilter 函数。

【解决方案2】：

通过引用传递在 JavaScript 中很尴尬。对象仅通过引用传递其值，因此重新分配给变量名称会导致该变量名称具有新值，但原始变量保留其值。

我打算向Yves M 发布类似的解决方案，但我从您的 cmets 中看到您已经尝试过。另一种解决方案是使用对象并操作它们的属性。我认为您正在努力实现以下目标，

function SetFilter(ddl, value) {
  if (Lists[ddl] == undefined)
    Lists[ddl] = new ListFilter(ddl);

  clearTimeout(List_timerIds[ddl]);
  List_timerIds[ddl] = setTimeout(function() { list.SetFilter(value);}, 1500);
}

var Lists = {};
var List_timerIds = {};

另外，我想重申一下我关于选择替代事件进行输入处理的评论。 oninput (HTML5) 和 onpropertychange (Internet Explorer) 在捕捉文本输入方面做得更好。

【讨论】：

【解决方案3】：

我想这可能就是您正在寻找的答案。

(function() {
    var COURSE_ID_List = {},
    COURSE_ID_List_timerId = {};
    window.setFilter=function(ddl, value) {
        var list = COURSE_ID_List[ddl];
        if (!list) {
            list = new ListFilter(ddl);
        } else if(list.getFilter() == value) {
            return;
        }
        var timerId = COURSE_ID_List_timerId[ddl];
        if (timerId) {
            clearTimeout(timerId);
        }
        COURSE_ID_List_timerId[ddl] = setTimeout(function() { list.SetFilter(value); }, 1500);
        COURSE_ID_List[ddl] = list;
        return;
    }
})();

和

<input name="Course" type="text" id="COURSE_ID" onkeyup="setFilter('COURSE_ID', this.value);" onblur="setFilter('COURSE_ID', this.value);" />

【讨论】：