javascript - setInterval 完成后如何传递变量？

Question

我有以下代码。我开始的一个小提琴是我正在尝试做的事情的一个孤立版本。

var height;
var count = 0;

var setHeight = setInterval(function() {   
    count++;
    console.log('count');
    if ( count  > 10)
    {
        console.log('done');
        height = 20;
        clearInterval(setHeight);   
    }
},100);

console.log('this is the height -> ' + height);

我期望（或希望发生）的是height = 20;在我的 console.log 中输出的值。最终目标是在清除间隔后从我的 setInterval 函数中检索一个变量。

现在我得到..这是高度->未定义

小提琴：

http://jsfiddle.net/GNvG6/8/

我要完成的工作：

所以根本问题是这个。我有一个在 DOM 中加载某些元素之前运行的函数。所以我想做的是继续运行该函数，直到该元素的实例存在。一旦发生这种情况，我打算获取该元素的高度并将其交给另一个变量。我不确定这是否能解决我的问题，但我想如果我能让它工作，我至少可以测试一下。

Answer 1

var height;
var count = 0;

var setHeight = setInterval(function() {   
    count++;
    console.log('count');
    if ( count  > 10)
    {
        console.log('done');
        height = 20;
        reportHeight(height);
        clearInterval(setHeight);   
    }
},100);

function reportHeight(height){
    console.log('this is the height -> ' + height);
}

控制台输出是

(11) count
done
this is the height -> 20 

Answer 2

小提琴演示

var height = 0;                                        // initial value
var count = 0;

var setHeight = setInterval(function() {   
    count++;
    console.log('count and height is still:'+ height); // height is always 0
    if ( count  > 10){
        height = 20;
        console.log('done and height is:'+ height);    // height is finally 20
        clearInterval(setHeight);           
    }
},100);

Answer 3

当您使用 jQuery 时，您也可以使用$.Deferred.

// wait for 3 + (0..2) seconds
setTimeout(function () {
    $(document.body).append($("<strong>hello</strong>"));
}, 3000 + 2000 * Math.random());

function waitFor(test, interval) {
    var dfd = $.Deferred();
    var count = 0;
    var id = setInterval(function () {
        console.log(count++);
        var val = test();
        if (undefined !== val) {
            clearInterval(id);
            dfd.resolve(val);
        }
    }, interval);
    return dfd.promise();
}

function waitForEl(selector, interval) {
    return waitFor(function () {
        var els = $(selector);
        return (els.length > 0) ? els : undefined;
    }, interval);
}

waitForEl("strong", 100).then(function (strong) {
    console.log(strong, strong.height());
});

此 jsfiddle 中的示例。