Javascript 滚动事件持续多长时间？_Javascript_Jquery_Html_Css

Javascript 滚动事件持续多长时间？

javascript jquery html css

Javascript 滚动事件持续多长时间？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我遇到一个由scroll事件引起的问题，此问题可以按如下方式重现：将焦点设置为默认情况下在浏览器窗口中看不到的元素（需要滚动查看）然后附加一个侦听器以捕获滚动事件我所困惑的是，当我将焦点设置在not seen元素上时，它将触发一个滚动事件，侦听器如何捕获稍后附加的滚动事件？我想卷轴活动可能会持续一段时间，但会持续多久？谁能给我一个建议吗下面是一个简单的代码来重现它： <html> <head> <script type="text/javascript"&g

我遇到一个由scroll事件引起的问题，此问题可以按如下方式重现：

将焦点设置为默认情况下在浏览器窗口中看不到的元素（需要滚动查看）

然后附加一个侦听器以捕获滚动事件

我所困惑的是，当我将焦点设置在not seen元素上时，它将触发一个滚动事件，侦听器如何捕获稍后附加的滚动事件？我想卷轴活动可能会持续一段时间，但会持续多久？谁能给我一个建议吗

下面是一个简单的代码来重现它：

<html>
<head>
<script type="text/javascript">
   var onchange = function(){
       var ip1 = document.getElementById("target");
       var ip2 = document.getElementById("source");
       var parent = document.getElementById("parent");
       ip2.focus();
       document.onscroll = function(e){
          console.log("scroll");
       };
   }
</script>
</head>
<body onload="onchange()">
<input id="target"></input>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="parent">
 <input id="source">
</div>


var onchange=function（）{
var ip1=document.getElementById（“目标”）；
var ip2=document.getElementById（“源”）；
var parent=document.getElementById（“父项”）；
ip2.focus（）；
document.onscroll=函数（e）{
控制台日志（“滚动”）；
};
}

对此的解释是JavaScript事件处理程序不会立即启动。因此，当您调用

focus（）

时，它不会立即关注第二个文本框。相反，它执行

onchange

函数的其余部分，然后滚动页面。当页面滚动时，

scroll

事件的事件处理程序已经设置好

原因如下：当JavaScript中发生事件时，它被放置在消息队列（JavaScript运行时引擎的内部组件）上。消息将从该队列中删除，并在事件循环的每个“回合”中进行处理。事件循环的两个回合之间的时间量各不相同，但通常每个回合所需的时间不超过4毫秒

要解决您的问题，您可以在事件循环的下一轮中设置绑定（在触发

滚动

事件之后）。为此，开发人员通常会执行以下操作：

setTimeout(function () {
    document.onscroll = function (e) {
        console.log("scroll");
    };
}, 0);

尽管我指定了0毫秒的延迟，但是

setTimeout

回调直到事件循环的下一轮才会启动，因此它实际上在大约4毫秒后才会启动。可以保证，在处理

focus

事件之前不会设置绑定（在将

setTimeout

消息添加到消息队列之前，始终将

focus

消息添加到消息队列中，并按顺序处理队列中的消息）

有人提议在JavaScript中引入一个

setImmediate

函数，以允许开发人员在下一轮事件循环中执行代码，但该函数似乎不太可能在全球范围内采用。请参阅：

该函数的工作原理与上面的hack类似：

setImmediate(function () {
    document.onscroll = function (e) {
        console.log("scroll");
    };
});

如果您感兴趣，有一些用于

setImmediate

的多边形填充比

setTimeout

hack更快，并使用HTML 5

postMessage

API。请参阅：

下面是一个与损坏的代码一起运行的固定代码的JSBin:

不确定您在这里试图解决的问题到底是什么，而滚动事件实际上并不“持续”与任何其他事件相比，它可能在滚动网站的过程中被频繁触发，并且如果您试图基于该事件执行操作，则可能会影响性能。您可以在此处找到更深入的解释和使用计时器的可能解决方法：