【问题标题】:Pull data from server onmousewheel?从服务器 onmousewheel 中提取数据?
【发布时间】:2020-02-18 02:08:59
【问题描述】:

我有一个POST 请求,它根据用户可通过number inputs 调整的参数从服务器中提取数据。只听change 事件是不够的,因为我希望在使用鼠标滚轮更改输入值的同时刷新数据。

用类似的方法调用我的刷新函数显然不是最佳的:

$('input').on('mousewheel', function(){
    refresh_data();
});

会有很多请求,因为它们是异步的,所以我永远无法确定最后一个完成的请求是否会是我发送的最后一个。

我目前使用的是setInterval 来监视包含已请求刷新的间隔(四舍五入的时间戳)的对象。在mousewheel 侦听器中,我将下一个间隔添加到对象,as 属性/键,以避免重复。

类似的东西:

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 较少的用户可能“跳过错误的节拍”,并最终完成他的鼠标滚轮移动看到与参数值不匹配的结果。

我觉得也许我让这变得比它必须的更复杂,所以我问:

从服务器 onmousewheel 提取数据的最佳方式是什么,考虑:

1:我想不断刷新数据用户在输入字段上滚动滚轮。

2:我希望100%确保车轮移动后显示的数据始终准确

【问题讨论】:

  • 您尝试过 Intersection Observer API 吗?它是用于检查元素是否在视图中的本机接口。而且我认为试图用setInterval 重新创建的东西称为去抖功能。网上有很多例子。
  • @EmielZuurbier 谢谢,这实际上非常有用!

标签: javascript optimization setinterval mousewheel


【解决方案1】:

尝试使用文档偏移高度,如下面的代码。当用户向下滚动并到达滚动结束时,这将起作用。这种行为有点像 android 的回收器视图。

window.onscroll = function(ev) {
      if ((window.innerHeight + window.pageYOffset ) >= 
      document.body.offsetHeight) {
           alert("you're at the bottom of the page");
     }
  };

【讨论】:

  • 但更好的方法是使用addEventListener 和事件scroll
猜你喜欢
  • 1970-01-01
  • 2020-07-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多