javascript递归函数问题求大神看看

Question

大神晚上好，请帮我看看我的函数为什么不能执行呢？情况说明：由于div中的table是通过ajax加载过来的，函数的目的是判断有没有这table,如果有则让其背景变红，没有的话，就1秒后再执行以下这个函数，但是现在当table已经加载显示后，find()函数并没有让table变红（报错：Uncaught RangeError: Maximum call stack size exceeded）先谢谢大神们了！?函数如下：function find(div) {    var target = div.getElementsByTagName("table")[0];    if (target.length > 0) {        target.style.background = 'red';    } else {        setTimeout(function() {            find(div); //arguments.callee(div)也不行        }, 1000)    }};使用：var div = document.getElementById('div'); find(div);

Answer 1

因为你用div.getElementsByTagName('table')[0]这个取到的是一个DOM对象，由于DOM对象没有.length属性，所以target.length其实是未定义的。而undefined > 0的值一直是false，所以你会无限次地调用else分支，所以也就会添加无数次的find(div)绑定。所以浏览器提示find调用次数超出最大限制。

正确的做法是让target为div.getElementsByTagName("table")，这才是一个数组，才有.length的值。

Update

代码：
方案1：（判断取到所有table的数组长度，并取第一个操作）

function find(div) {

    var target = div.getElementsByTagName("table");

    if (target.length > 0) {

        target[0].style.background = 'red';

    } else {

        setTimeout(function() {

            find(div);

        }, 1000)

    }

};

方案2：（直接判断table，并直接操作取到的table）

function find(div) {

    var target = div.getElementsByTagName("table")[0];

    if (target) {

        target.style.background = 'red';

    } else {

        setTimeout(function() {

            find(div);

        }, 1000)

    }

};