Javascript:: this.value 在 for 循环中不能正常工作？

Question

我的代码几乎可以说明我将要实现的目标，但只是为了澄清...

我想 return 长按（鼠标按下 200 毫秒）后的输入值。

它在 for 循环外工作得很好，但在循环内似乎不行。

对于 this.value，它 return 未定义，对于 gangina[i].value，它 return 什么也没有。

这是 jsFiddle：

http://jsfiddle.net/hezi_gangina/nxao19oc/

这是我的代码：

<input type=button value=1>
<input type=button value=2>

<script>

var hezi;
var gangina=document.getElementsByTagName("input");

alert(gangina[1].value); //THIS IS OK! :)

for(i=0;i<gangina.length;i++)
{

    gangina[i].onmousedown=function()
    {
        hezi=setTimeout
        (
            function()
            {
                alert('this = '+this.value); // = undefined
                alert('gangina['+i+'] = '+gangina[i].value); // = nothing
            },200
        );
    }

}

</script>

这里需要稍微调整一下...

Answer 1

DEMO

您可能需要将函数包装在 IIFE 中，这将绑定 i 值。

由于内部 mousedown 事件处理程序将在某个时刻执行，它只会记住 i 的最后一个值。另请注意，您也忘记在 i 前面提到 var。

如果您想为 i 分配正确的值，最好将内部函数包装在 IIFE 函数中，现在事件处理程序此时将引用局部作用域的 i。所以它会永远记住 i.

的正确值

for(var i=0;i<gangina.length;i++)
{
   (function(i) {
    gangina[i].onmousedown=function()
    {
        var that = this;
        hezi=setTimeout
        (
            function()
            {
                alert('this = '+that.value); // = undefined
                alert('gangina['+i+'] = '+gangina[i].value); // = nothing
            },200
        );
    }
  })(i);

}

同样在 setTimeout 中，this 将引用 Window 对象而不是 DOM 元素。

Javascript:: this.value 在 for 循环中不能正常工作？

Javascript:: this.value is not working properly inside for loop?

javascript

arrays

this

settimeout

onmousedown