From fa6190b53858800abb3c6f03e5d10eed9654957d Mon Sep 17 00:00:00 2001 From: PartMan Date: Sun, 28 Jul 2024 01:50:47 +0530 Subject: [PATCH 1/2] Teambuilder: Debounce searching teams --- .../js/client-teambuilder.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/play.pokemonshowdown.com/js/client-teambuilder.js b/play.pokemonshowdown.com/js/client-teambuilder.js index 3c2fa70a1c..7a98edd932 100644 --- a/play.pokemonshowdown.com/js/client-teambuilder.js +++ b/play.pokemonshowdown.com/js/client-teambuilder.js @@ -138,6 +138,8 @@ curFolder: '', curFolderKeep: '', curSearchVal: '', + // Debounce value for searching in the teambuilder + searchTimeout: null, exportMode: false, formatResources: {}, @@ -3239,11 +3241,20 @@ this.chartSet(val, selectNext); }, searchChange: function (e) { - // 91 for right CMD / 93 for left CMD / 17 for CTL - if (e.keyCode !== 91 && e.keyCode !== 93 && e.keyCode !== 17) { - this.curSearchVal = e.currentTarget.value; + if (this.searchTimeout) clearTimeout(this.searchTimeout); + + var searchVal = e.currentTarget.value; + + function updateTeamList() { + // 91 for right CMD / 93 for left CMD / 17 for CTL + if (e.keyCode !== 91 && e.keyCode !== 93 && e.keyCode !== 17) { + this.curSearchVal = searchVal; + } this.updateTeamList(); } + // Debounced to ensure this isn't called too frequently while typing + this.searchTimeout = setTimeout(updateTeamList.bind(this), 400); + }, chartSetCustom: function (val) { val = toID(val); From 1fb295f91ff35a08cb6d7dc6395bf74e64e2f4bf Mon Sep 17 00:00:00 2001 From: PartMan Date: Fri, 9 Aug 2024 08:00:22 +0530 Subject: [PATCH 2/2] Teambuilder: Only debounce for 500+ teams --- .../js/client-teambuilder.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/play.pokemonshowdown.com/js/client-teambuilder.js b/play.pokemonshowdown.com/js/client-teambuilder.js index 7a98edd932..e309e5f85c 100644 --- a/play.pokemonshowdown.com/js/client-teambuilder.js +++ b/play.pokemonshowdown.com/js/client-teambuilder.js @@ -3241,10 +3241,7 @@ this.chartSet(val, selectNext); }, searchChange: function (e) { - if (this.searchTimeout) clearTimeout(this.searchTimeout); - - var searchVal = e.currentTarget.value; - + var DEBOUNCE_THRESHOLD_TEAMS = 500; function updateTeamList() { // 91 for right CMD / 93 for left CMD / 17 for CTL if (e.keyCode !== 91 && e.keyCode !== 93 && e.keyCode !== 17) { @@ -3252,8 +3249,15 @@ } this.updateTeamList(); } - // Debounced to ensure this isn't called too frequently while typing - this.searchTimeout = setTimeout(updateTeamList.bind(this), 400); + + // If the user has a lot of teams, search is debounced to + // ensure this isn't called too frequently while typing + if (Storage.teams.length > DEBOUNCE_THRESHOLD_TEAMS) { + if (this.searchTimeout) clearTimeout(this.searchTimeout); + + var searchVal = e.currentTarget.value; + this.searchTimeout = setTimeout(updateTeamList.bind(this), 400); + } else updateTeamList(); }, chartSetCustom: function (val) {