首頁猿問 addEventListener...

addEventListener 在同一輸入上多次執行函數

JavaScript

森欄 2022-10-13 19:35:29

我打算構建一個自動完成搜索框，搜索大約包含 12,000 多個數據的建議數據。jquery 從搜索框中獲取值，搜索數據數組并將建議值存儲在數組中，該數組將進一步用于填充建議。<input type="text" id="Search_box" placeholder="Search Data">$('#Search_box').on('input', function () { suggester(document.getElementById("Search_box"));});以下函數從搜索框中獲取輸入值并搜索包含 12,000 多條記錄的 search_array，并給出包含這些字符的數據列表作為建議。function suggester(searchElement) {var init;searchElement.addEventListener("input", function(e) { var x, y, i, val = this.value; closeAllLists(); if (!val) { return false;} init = -1; var search_value = $('#Search_box').val(); suggest_data = []; re = new RegExp("\\b\\w*" + search_value + "\\w*\\b", "ig"); for (i = 0; i < search_array.length; i++) { if(search_array[i].match(re)) suggest_data = suggest_data.concat(search_array[i].match(re)); } x = document.createElement("DIV"); x.setAttribute("id", this.id + "autocomplete-list"); x.setAttribute("class", "autocomplete-items"); x.setAttribute("onClick", "this.setSelectionRange(0, this.value.length)"); this.parentNode.appendChild(x); for (i = 0; i < suggest_data.length; i++) { y = document.createElement("DIV"); val = truncate(suggest_data[i],30); reg = new RegExp(search_value, "ig"); n = val.search(reg); res = suggest_data[i].substr(n,search_value.length); val = val.replace(res, '<span class="text_highlighter">'+res+'</span>'); y.innerHTML = val; y.innerHTML += "<input type='hidden' value='" + suggest_data[i] + "'>"; }});但是，當單擊退格鍵時，這種方法會減慢速度。addEventListener 函數被觸發多次，因此它在建議的函數內循環以給出結果。例如，如果輸入 ASD 并且如果進一步鍵入退格鍵，則它在給出結果時開始減慢。應該怎么做才能加快搜索速度？

查看完整描述

1 回答

HUX布斯

TA貢獻1876條經驗獲得超6個贊

在每一個keydown你eventListener觸發你的autocomplete功能。當有人點擊backspace時，你會同時得到一堆keydown's，而現在，這意味著你同時運行了該函數多次。這就是減緩一切的原因。

例如，如果我輸入“Hello my name is”然后刪除整個字符串，我會觸發您的搜索 16 次，搜索 12,000 x 16 條記錄！你可以開始明白為什么這會成為一個問題。

debounce 函數很容易解決這個問題，因為它設置了再次運行之間的延遲。IE。如果有人剛剛擦除了整個字符串，它可能只觸發一次。

這是 debounce 函數的一個很好的例子：

// http://davidwalsh.name/javascript-debounce-function

function debounce(func, wait, immediate) {

var timeout;

return function() {

var context = this, args = arguments;

var later = function() {

timeout = null;

if (!immediate) { func.apply(context, args); }

};

var callNow = immediate && !timeout;

clearTimeout(timeout);

timeout = setTimeout(later, wait);

if (callNow) { func.apply(context, args); }

};

}

這就是你如何在你的代碼上實現它以實現自動完成：

searchElement.addEventListener("keydown", debounce(function(e) {

var x = document.getElementById(this.id + "autocomplete-list");

if (x) x = x.getElementsByTagName("div");

if (e.keyCode == 40) {

init++;

addActive(x);

} else if (e.keyCode == 38) { //up

init--;

addActive(x);

} else if (e.keyCode == 13) {

e.preventDefault();

if (init > -1) {

if (x) x[init].click();

}

}, 500)); // Time set here as callback for how often it should be run, change this to whatever you want the time delay to be.

反對回復 2022-10-13

1 回答
0 關注
283 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

addEventListener 在同一輸入上多次執行函數

addEventListener 在同一輸入上多次執行函數

1 回答

添加回答