Javascript 是否从MouseWheel上的服务器拉取数据?
我有一个Javascript 是否从MouseWheel上的服务器拉取数据?,javascript,optimization,setinterval,mousewheel,Javascript,Optimization,Setinterval,Mousewheel,我有一个POST请求,它根据用户通过number inputs可以调整的参数从服务器提取数据。仅仅听change事件是不够的,因为我想在使用鼠标滚轮更改输入值时刷新数据 用类似的方法调用我的刷新函数显然不是最优的: $('input').on('mousewheel', function(){ refresh_data(); }); 会有很多请求,因为它们是异步的,我永远无法确定最后一个要完成的请求是否是我发送的最后一个请求 我目前使用的是setInterval来监视一个对象,该对象包
POST
请求,它根据用户通过number inputs
可以调整的参数从服务器提取数据。仅仅听change
事件是不够的,因为我想在使用鼠标滚轮更改输入值时刷新数据
用类似的方法调用我的刷新函数显然不是最优的:
$('input').on('mousewheel', function(){
refresh_data();
});
会有很多请求,因为它们是异步的,我永远无法确定最后一个要完成的请求是否是我发送的最后一个请求
我目前使用的是setInterval
来监视一个对象,该对象包含请求刷新的间隔(舍入的时间戳)。在mouseweel
监听器中,我将下一个间隔作为属性/键添加到对象中,以避免重复
诸如此类:
var i = 100;
var obj = [];
$('input').on('mousewheel', function(){
// add next interval to obj;
obj[Math.ceil(Date.now()/i)*i] = true;
});
var check = setInterval(function(){
// refresh if current interval is in obj
var t = Math.floor(Date.now()/i)*i;
if(obj[t]){
delete obj[t]; // remove from obj
refresh_data();
}
}, i);
我在我的机器上用I=50
测试了这个代码,对象总是空的,这就是我们想要的,但是用I=30
,只要我用轮子跑得太快,我就会看到一些旧的间隔在对象中积累。这是由setInterval
跳过节拍引起的,因此无论我为I
选择什么值,CPU较少的一些用户都可能“跳过错误的节拍”,并最终完成鼠标滚轮移动,看到与参数值不匹配的结果
我觉得我可能把事情弄得更复杂了,所以我问:
考虑到:
1:当用户在输入字段上滚动滚轮时,我想不断刷新数据
2:我希望100%确保在车轮移动后显示的数据始终准确尝试在视线外使用文档,如以下代码所示。当用户向下滚动并到达滚动的末尾时,这将起作用。这种行为有点像android的回收者视图
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset ) >=
document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
您是否尝试过Intersection Observer API?它是一个本地接口,用于检查元素是否在视图中。我认为我们试图用
setInterval
重新创建的被称为去盎司函数。网上有很多例子。@EmielZuurbier谢谢,这实际上非常有用!但更好的方法是使用addEventListener
和事件滚动