jQuery AJAX 是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。反跳(Debouncing)是一种优化技术,用于减少频繁触发事件或请求的次数,通常应用于搜索框输入、窗口调整大小等场景。
频繁触发 AJAX 请求会导致服务器压力增大,用户体验下降。
使用时间去反跳技术,等待用户输入一段时间后再发送请求。
// 引入 jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 定义去反跳函数
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// 搜索框输入事件
$('#search-input').on('input', debounce(function() {
const query = $(this).val();
if (query.length > 0) {
$.ajax({
url: '/search',
method: 'GET',
data: { query: query },
success: function(response) {
// 处理响应数据
$('#search-results').html(response);
},
error: function(xhr, status, error) {
console.error('AJAX Error:', error);
}
});
} else {
$('#search-results').html('');
}
}, 300)); // 300 毫秒去反跳时间
</script>
通过上述代码,可以实现一个简单的 jQuery AJAX 搜索去反跳功能。当用户在搜索框中输入内容时,系统会在 300 毫秒内等待,如果用户继续输入,则重新计时,直到用户停止输入 300 毫秒后,才会发送 AJAX 请求。这样可以有效减少请求次数,提升性能和用户体验。
领取专属 10元无门槛券
手把手带您无忧上云