Question

我正在使用以下代码来查找查看者正在访问的页面的哪一部分（例如谷歌图书，以查找正在查看的页面）：

$("#main-content").scroll(function () { 
            Nx.curPage = (Math.round($(this).scrollTop()/620)+1);
            window.location.hash = "#"+Nx.curPage;
            Nx.select(undefined);
        });

另外在另一部分我使用$(window).resize( ... )来使我的内容适合当前窗口大小，每个调整大小都会调用它。你可以想象这会减慢页面的速度，特别是在较旧的硬件上。是否有任何方法可以实现滚动或调整大小时停止然后开始执行这些操作，从而减少了多少进程？像$("#main-content").scrollStop ???

这样的东西

Answer 1

你可以做两件事。

1。）设置超时，以便仅在某些空闲状态后调整大小/滚动：

var timeout;
$("#main-content").scroll(function () { 
    clearTimeout(timeout);
    timeout = setTimeout(function(){
      Nx.curPage = (Math.round($(this).scrollTop()/620)+1);
      window.location.hash = "#"+Nx.curPage;
      Nx.select(); // note: undefined is passed by default
    }, 200);
});

2。）限制通话次数/秒：

var lastScroll = 0;
$("#main-content").scroll(function () { 
  var now = +new Date;
  if (now - lastScroll > 100) { // only execute if (elapsed > 100ms)
    Nx.curPage = (Math.round($(this).scrollTop()/620)+1);
    window.location.hash = "#"+Nx.curPage;
    Nx.select();
    lastScroll = now;
  }          
});

Answer 2

尝试以下功能。它检查用户是否滚动了某个no。像素，但该功能仅以设定的间隔（在下面的示例中为每秒5次）触发，而不是在滚动期间连续触发。

    var scrollCheck;

    $(window).on('scroll', function() {
        clearInterval(scrollCheck);
        scrollCheck = setInterval(function(){
            clearInterval(scrollCheck);
            scrollPosition = $(this).scrollTop();
                            scrollAmount = 150 // no. of pixels that have been scrolled from top

            if(scrollPosition > scrollAmount){
                alert('scrolled past point')
            }else{
                alert('not scrolled past point')
            }

        },200);
    });

减少.resize和.scroll方法的调用次数

2 个答案: