Question

问题：为什么$（this）里面的setTimeout函数指向window对象？如何在setTimeout中点击当前div的访问权？

 <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    </head>
    <body>
    <div class="outer">
      <div class="inner">

      </div>
    </div>
    </body>

JS：

$("div.inner").on('click',function(e){

    //code block start
    var parentOffset = $(this).parent().offset(); 
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    console.log(relX);
    console.log(relY);
    //code block end

    setTimeout(function(){
        //inserting code block here to see my problem
    },200);

});

JSbin：http://jsbin.com/pumaxe/1/edit

Answer 1

有几种方法可以做到这一点，但最简单的方法是使用第二个变量来保存对div元素的引用。

$("div.inner").on('click',function(e){

//code block start
var div = $(this);
var parentOffset = $(this).parent().offset(); 
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
console.log(relX);
console.log(relY);
//code block end

setTimeout(function(){
//inserting code block here to see my problem
// Now you can use the div variable in the outer context in here, without using this.
// Search google for JavaScript closures for more info on this.
},200);

});

Answer 2

您希望在进入this之前将当前元素e和setTimeout缓存到全局变量中，如下所示。

请注意setTimeout和setInterval在全球范围内运行;因此，他们只能访问全局变量和函数...将其视为window.setTimeout()和window.setInterval()：

$("div.inner").on('click',function(e){
    window.that = $(this);
    window.e = e;  

    setTimeout(function(){
        //code block start
        var parentOffset = that.parent().offset(); 
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;
        console.log(relX);
        console.log(relY);
        //code block end
    },200);

});

<强>更新

也可以在下面的评论中使用@Dom建议的闭包。 关闭不需要全局变量（因此我们尽量不要混淆全局范围，这是一个更好的方法）但我们必须传递给关闭我们想要在setTimeout中使用的值：

$("div.inner").on('click',function(e){

    (function( that, e ) { //<<---- corresponding variables used within closure
        setTimeout(function(){
            //code block start
            var parentOffset = that.parent().offset(); 
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;
            console.log(relX);
            console.log(relY);
            //code block end
        },200);
    })( $(this), e );  //<<---- values passed to closure from click handler

});

Answer 3

这是Javascript函数范围的问题，请看一下link。

试试这个：

$("div.inner").on('click',function(e){

    var $that=$this;
    //code block start
    var parentOffset = $(this).parent().offset(); 

    setTimeout(function(){
        //Use $that instead of $this inside your functions

    },200);

}

$（this）在函数内部使用时指向window对象

3 个答案: