平滑刷新/显示更新的表格数据

Question

我使用此函数用数据库中的值填充表

我有一个过滤器，所以可以搜索

但是，当我更新我的表，删除旧的html并插入新的html时，页面很短时间内没有任何内容，所以它是空白的，如果我键入像"bobby"这样的长句，它看起来很难看

这是5个键控功能和5次刷新，我希望你能理解我在说什么，我想要它，这样它看起来很平滑

function getData(filter) {
$.ajax({
url: '/Person/GetData',
type: 'GET',
data: { Filter: filter },
success: function (data) {
// Template for HTML
var template = '';
// Loop through the data
$.each(data, function (index, value) {
// Values from the database
var personId = value['Id'];
var firstName = value['FirstName'];
var lastName = value['LastName'];
var age = value['Age'];
// Template for a new <tr>
template += '<tr id="' + personId + '">' +
'<td col-lg-4">' + firstName + '</td>' +
'<td col-lg-4">' + lastName + '</td>' +
'<td col-lg-2">' + age + '</td>' +
'<td><a class="del-link col-lg-2">Slett</a></td>' +
'</tr>';
});
// Add the template to the table body
$('tbody').html(template);
}
});

}

Answer 1

这里有两个独立的问题：

但是当我更新表时，删除旧的html并插入新的第一，这一页很短时间内什么都没有，所以它是空白的，而且如果我输入像"bobby"这样的长句，看起来很难看

您应该总是期望AJAX请求(尤其是那些随后插入内容的请求)花费比预期更长的时间。您应该使用某种动画图形来显示正在动态加载的内容。有很多方法可以做到这一点(在StackOverflow上搜索"AJAX加载程序动画")。

你背靠背的检查对你也没有帮助。。。基本上，每个后续查找都清空页面内容，迭代数据，然后将其插入DOM。多次这样做(正如您所说)不仅没有必要，而且会给服务器和客户端的浏览器带来负担。

这是5个keyup功能和5次刷新，我希望你理解我是关于，我想要它，这样它看起来平滑

您应该使用setTimeout方法，这样就不会在每个keyup上执行查找(当keyup是这样顺序的时)。这很容易理解。它本质上是一个"计时器"，您可以在事件(keyup)发生时启动它。如果用户在计时器运行时触发了keyup事件，则启动/重置计时器。计时器结束后，执行AJAX调用。

例如，使用sudo编码，以下是我如何处理(尽量保持简单)

• onKeyUp事件
• 清除以前设置的任何setTimeout()
• 启动新的setTimeout()(在计时器结束后调用函数)
• ---
• 当setTimeout()执行函数时
• 显示动画
• 执行AJAX调用
• 使用数据生成内容
• 成功时插入DOM或失败时插入错误消息
• 隐藏动画(无论成功与否)