Augment Edit Box Input Enfasterment (#2450)
* edit box performance "fix" Note: jQuery makes an adjustment to height or scrollHeight that pure JavaScript doesn't;+2 was the minimum I needed to not get a vertical scrollbar, so I went with +4 * Refactor * Use debounce instead of throttle --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
This commit is contained in:
parent
2b30555f3a
commit
e1e0ef8730
|
@ -9169,14 +9169,26 @@ jQuery(async function () {
|
|||
chooseBogusFolder($(this), tagId);
|
||||
});
|
||||
|
||||
$(document).on('input', '.edit_textarea', function () {
|
||||
scroll_holder = $('#chat').scrollTop();
|
||||
$(this).height(0).height(this.scrollHeight);
|
||||
/**
|
||||
* Sets the scroll height of the edit textarea to fit the content.
|
||||
* @param {HTMLTextAreaElement} e Textarea element to auto-fit
|
||||
*/
|
||||
function autoFitEditTextArea(e) {
|
||||
scroll_holder = chatElement[0].scrollTop;
|
||||
e.style.height = '0';
|
||||
e.style.height = `${e.scrollHeight + 4}px`;
|
||||
is_use_scroll_holder = true;
|
||||
}
|
||||
const autoFitEditTextAreaDebounced = debounce(autoFitEditTextArea, debounce_timeout.short);
|
||||
document.addEventListener('input', e => {
|
||||
if (e.target instanceof HTMLTextAreaElement && e.target.classList.contains('edit_textarea')) {
|
||||
const immediately = e.target.scrollHeight > e.target.offsetHeight || e.target.value === '';
|
||||
immediately ? autoFitEditTextArea(e.target) : autoFitEditTextAreaDebounced(e.target);
|
||||
}
|
||||
});
|
||||
$('#chat').on('scroll', function () {
|
||||
document.getElementById('chat').addEventListener('scroll', function () {
|
||||
if (is_use_scroll_holder) {
|
||||
$('#chat').scrollTop(scroll_holder);
|
||||
this.scrollTop = scroll_holder;
|
||||
is_use_scroll_holder = false;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -5,6 +5,8 @@
|
|||
export const debounce_timeout = {
|
||||
/** [100 ms] For ultra-fast responses, typically for keypresses or executions that might happen multiple times in a loop or recursion. */
|
||||
quick: 100,
|
||||
/** [200 ms] Slightly slower than quick, but still very responsive. */
|
||||
short: 200,
|
||||
/** [300 ms] Default time for general use, good balance between responsiveness and performance. */
|
||||
standard: 300,
|
||||
/** [1.000 ms] For situations where the function triggers more intensive tasks. */
|
||||
|
|
Loading…
Reference in New Issue