Jquery pdf.js添加页面更改之间的延迟

Jquery pdf.js添加页面更改之间的延迟,jquery,pdf,pdf.js,Jquery,Pdf,Pdf.js,我正在使用PDF.js呈现我的PDF。 我需要在每个页面更改事件之间创建10秒的延迟。 我尝试在我的页面上添加以下事件侦听器,但这会在默认页面更改侦听器之后触发 document.addEventListener("pagechange", function (e) { //my custom code here }); 如果有一些示例代码或伪代码,那就太好了。如果您想依靠scrollIntoView,您可以阻止用户从页面上滚动 该函数尝试将给定元素滚动到视口中 /*

我正在使用PDF.js呈现我的PDF。 我需要在每个页面更改事件之间创建10秒的延迟。 我尝试在我的页面上添加以下事件侦听器,但这会在默认页面更改侦听器之后触发

document.addEventListener("pagechange", function (e) {
            //my custom code here
});

如果有一些示例代码或伪代码,那就太好了。

如果您想依靠
scrollIntoView
,您可以阻止用户从页面上滚动

该函数尝试将给定元素滚动到视口中

/* I did not post the complete implementation here to avoid plain copy       *
 * and paste and to allow for own (and better) implemantations - if          *
 * someone prefers to see the working implementation, I might edit the post. */
使用scrollIntoView锁定页面 所以问题是:您希望滚动到哪个元素?js有一个名为viewer的元素,它有很多子元素,就像加载的PDF有很多页面一样。 例如,第三个孩子持有PDF的第三页

下一个问题:您想在什么时候将其滚动到视图中?这看起来有点难。通过在元素上运行
getclientracs()
,我们可以从元素的
DOMRect
获取元素的顶部位置。如果顶部大于视口顶部边框,则我们将滚动显示

对于底部,情况大致相同:元素的可视部分(关于高度)是其高度减去隐藏部分(位于视口顶部之外)。如果height-hiddenPart<视口的heightofviewport,则在底部向外滚动

假设一个元素存储在
pc
(页面容器)中,将上述两项结合在一起,您将得到:

function lockToPage() { 
  var rect = pc.getClientRects()[0];
  var offsetNav = vc.offsetTop;
  if (rect.y > offsetNav) { pc.scrollIntoView(true); }
  if (rect.height + rect.y - window.innerHeight < 0) {    pc.scrollIntoView(false); }
}
释放可以通过从
vc
中删除事件侦听器来执行此锁定;但是什么时候应该这样做呢?嗯,十秒钟之后。。。换页后?不。由于某些页面可能需要花费时间进行渲染,因此我们最好等待页面完成渲染,从而收听
pagerendered

我们想添加的小功能是防止用户在完成设置之前跳过页面并阻止用户交互


现在我们已经有了我们所需要的一切,我想——以我们的PDF.js源代码(viewer.html)为例,我们可以在其他js包含之前添加我们的代码,以确保我们的事件侦听器将首先被连接,请参见

在这十秒钟内您希望/需要发生什么?您希望用户在每个页面上停留至少10秒(防止滚动/更改页面)还是其他内容?我需要用户在同一页面上停留至少10秒并防止更改页面。的交叉张贴
function initLocker() {
  vc = document.getElementById("viewerContainer");
  pc = document.getElementById("page1").offsetParent;
  lockToPage();
  vc.addEventListener("scroll", lockToPage);
}