Find() 的 Javascript 代码优化

Question

我有 C# 代码在 SQL 中运行查询并返回大约 2000 行。然后创建一个 Treeview 控件并将其添加到我的主页。这几乎是立即完成的，这很好。

var orgId = $('select[name="ctl00$PageContent$FunctionsDropDownList"] option:selected').val();
        if (!orgId) {
            return false;
        }
        //calls serverside get data
        //This line happens quickly
        $('#ctl00_PageContent_HiddenRulesDialogTriggerButton').click();

        //This part takes about 10-15 minutes to finally get to the true
        var i = setInterval(function () {
            if ($('#ctl00_PageContent_treeview').find('table').length > 0)
            {
                clearInterval(i);
                StartDialog();
                return false;
            }
        });

因此，点击 clearInterval(i) 大约需要 10-15 分钟。当它出现时，i = 978。不知道为什么会花这么长时间。可能 find() 真的很慢。有人推荐替代方案吗？

编辑

Answer 1

问题可能是您在没有第二个参数(时间间隔)的情况下调用 setInterval

让我们看看您的代码似乎做了什么。

1. 查询后端，提取构建 TreeView 所需的数据。这很快就完成了。
2. 异步构建树。
3. 在构建树的同时，继续使用 find() 检查它是否准备就绪。

一些问题。

1. 与非 DOM 数据操作相比，所有 DOM 查询都相当慢。所以是的，find() 不是最快的函数，因为它从您指定的父对象开始搜索整个 DOM，并返回它找到的对象。
2. 如果像您一样只使用一个参数运行 setInterval:

代码:

var timer_id = setInterval(function() {
    ...code here...
});

...我认为它每毫秒执行一次。我已经用这段代码测试过了:

var k = 1;
var i = setInterval(function () {
    if (k < 100)
    {
        k += 1;
    } else {
        clearInterval(i);
        window.alert('Finished!');
    }
//No second argument
});

...它几乎是瞬间完成的。

所以我猜它运行得如此之慢是因为该程序每秒触发数百次代价高昂的 DOM 搜索。解决方案是:

1. 提供一个函数，它可以在树构建结束时执行您需要的任何操作，作为对异步构建函数的回调。这样您就无需检查。
2. 尝试为 setInterval 提供一个时间间隔，看看它是否可以通过释放程序来构建树而不是重复检查来解决您的问题:

代码:

var i = setInterval(function () {
    if ($('#ctl00_PageContent_treeview').find('table').length > 0)
    {
        clearInterval(i);
        StartDialog();
        return false;
    }
//Once per second
},1000);

回调会是更好的做法，但提供时间间隔也可能有效。