Question

我正在尝试根据请求折叠div，但是我的setTimeout函数将无法成功调用其回调函数。以下是代码：

 function newsFeed() {

    this.delete = function(listingID) {

        var listing = document.getElementById(listingID);
        var currHeight = listing.offsetHeight;

        var confirmDelete = confirm("Are you sure you'd like to delete this listing forever?");
        if (confirmDelete) {
            this.collapse(listingID,currHeight,currHeight,100);
        }

    }

    this.collapse = function(listingID,orig_height,curr_height,opacity) {
        var listing = document.getElementById(listingID);
        var reduceBy = 10;
        if(curr_height > reduceBy) {
            curr_height = curr_height-reduceBy;
            listing.style.overflow = "hidden";
            listing.style.height = (curr_height-40) + "px";

            if(opacity > 0) {
                opacity = opacity - 10;
                var opaque = (opacity / 100);

                listing.style.opacity=opaque;                      
                listing.style.MozOpacity=opaque;                   
                listing.style.filter='alpha(opacity='+opacity+')';
            }

            setTimeout("this.collapse('"+listingID+"',"+orig_height+","+curr_height+","+opacity+")",1);
        }
    }
}

var newsFeed = new newsFeed();

我在文档中将其称为如下：

<div id="closeMe">
    <a onclick="newsFeed.delete('closeMe');">close this div</a>
</div>

当它到达this.collapse中的setTimeout函数时......它出错了“this.collapse不是函数”。

Answer 1

当超时调用你退出该功能时，“this”不再引用你的想法。

你应该使用一个闭包，如下所示：

var self = this;
setTimeout(function()
{
    self.collapse(listingID, orig_height, curr_height, opacity);
}, 1);

Answer 2

您看到的行为是因为JavaScript中的范围问题。 JavaScript只有两个范围 - 功能和全局。

当您执行setTimeout（）调用时，如果您希望在由于setTimeout（）调用而执行的代码中使用该状态，则必须在全局范围内设置变量。这将是解决问题的方法;格雷格已经提出了一种方法来做到这一点。

您可以在setTimeout和Core JavaScript Reference页面中的Mozilla开发人员中心找到更多信息。

Answer 3

调用超时后，this不再是您想要的。您需要通过其他一些机制来引用您想要的DOM元素，也许是基于ID的检索。

为什么这个setTimeout回调给我一个错误？

3 个答案: