首页 > 解决方案 > 使用搜索栏和去抖动

问题描述

我已经正确创建了一个实现去抖动的搜索栏。我创建了一个调用函数handleSearchKeyPress 的jQuery 输入字段。此函数通过调用 event.target.value 获取当前值,并使用该值调用另一个“去抖动”函数。然后这个去抖动函数接受一个函数和 timeDelay 作为参数,并实现清除当前超时值并设置一个新值的一般去抖动模式。这个函数(假设它超过了timeDelay)然后使用传入的值来做其他事情。我遇到的问题是搜索栏。当我输入“你好,世界!” 并等待 500 毫秒,它使用字符串“Hello, world”,但缺少最后一个字符。这是一些代码:

//This function is called and the returned value is rendered into the page
export const renderNavBar = function() {
let searchBar = $('<input type="text" placeholder="Search for player here...">').keydown(handleSearchKeyPress);
let panel = $('<div></div>').append(searchBar);
return panel;
}

export const handleSearchKeyPress = function() {
let value = event.target.value;
console.log(value);
}

如果我输入“hi”,我上面安慰的值将返回“h”。谁能解释我为什么以及如何让“嗨”出现?

标签: uisearchbardebouncing

解决方案


更新:我只需要使用 keyup 功能。keydown 函数在释放键之前调用现有栏,因此不包含我打算包含的字母。


推荐阅读