更換某些詞與使用Javascript

我想創建一個詞彙系統，該系統將獲得的常用詞，並通過AJAX對它們的定義鏈接定義，然後替換某些元素字（這些出現的任何與useGlossary類）鏈接到完整定義，並提供關於鼠標懸停的簡短定義。我這樣做的方式作品，但對於大型網頁需要30-40秒，在此期間頁面掛起。我想要減少更換所需的時間，或者使替換在後臺運行而不掛起頁面。更換某些詞與使用Javascript

我正在使用jQuery的大部分JavaScript和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>"; 
}

感謝您的任何意見/建議！

來源

2010-04-25 adharris

在服務器上這樣做是最優的。 – Matt 2010-04-25 17:58:50

而是一遍遍替換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將不必刷新每更換。

來源

2010-04-25 17:59:33 BradBrening

謝謝。由於某些原因，使用replace（）時不起作用。我不得不取出函數調用並替換爲實際的字符串，從而失去了保留原始情況的能力。此外，雖然這稍微颳了一些時間，但它在我們較長的頁面上幾乎沒有可用的地方。我可能將不得不在服務器上執行它。我會稍微留下問題，看看其他人是否有其他想法，否則就不能接受你的觀點。 – adharris 2010-04-25 18:46:43

您可以嘗試的另一件事是創建一個全局RegExp對象，並簡單地更改它的模式 - 即regExp.source =「\\ b」+ data [i] .term +「\\ b」。這將緩解每次迭代中反覆出現的「新」。我相信這可能會有所幫助。 – BradBrening 2010-04-25 19:28:40

我實際上只是看了一下我們另一個開發者傳給這個的頁面，該死的東西有超過3000個useGlossary類的實例，並且源代碼接近100000行。開始認爲這不完全是我的問題。謝謝！ – adharris 2010-04-25 19:35:15

更換某些詞與使用Javascript

回答

相關問題