Question

我正在尝试创建一个词汇表系统，它将通过ajax获取常用单词及其定义的列表，然后在某些元素（具有useGlossary类的那些元素）中使用链接替换该单词的任何出现完整定义并提供鼠标悬停的简短定义。我正在做的方式工作，但对于大页面，它需要30-40秒，在此期间页面挂起。我想减少更换所需的时间，或者让它在后台运行，而不会挂起页面。

我在大多数javascript中使用jquery，而在鼠标悬停时使用Qtip。这是我现有的慢速代码：

$(document).ready(function () {
    $.get("fetchGlossary.cfm", null, glossCallback, "json");
});

function glossCallback(data)
{

    $(".useGlossary").each(function() {
        var $this = $(this);
        for (var i in data)
        {

            $this.html($this.html().replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);}));
        }
        $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } })
    });
}

function makeLink(m, def)
{
    return "<a class='glossary glossary" + m.replace(/\s/gi, "").toUpperCase() + "' href='reference/glossary.cfm' title='" + def + "'>" + m + "</a>";
}

感谢您的任何反馈/建议！

Answer 1

为什么不像这样修改你的函数，而不是一遍又一遍地替换HTML：

function glossCallback(data) 
{ 

    $(".useGlossary").each(function() { 
        var $this = $(this); 
        var html = $this.html();
        for (var i in data) 
        { 

            html.replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);}); 
        }
        $this.html(html);
        $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } }) 
    }); 
}

以这种方式，DOM不必在每次替换时刷新。

使用Javascript替换某些带有定义链接的单词

1 个答案: