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

Question

我正在使用以下代码来查找查看者正在访问的页面的哪个部分(类似于Google图书,以查找正在查看的页面):

$("#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;
  }          
});

​