在JavaScript中实现事件延迟

最新推荐文章于 2023-10-16 11:16:07 发布

dingshi7798

最新推荐文章于 2023-10-16 11:16:07 发布

阅读量336

点赞数

文章标签： javascript ViewUI

JavaScript event latancy 在JavaScript中处理浏览器事件可能是客户端编程中最耗时，令人沮丧和最被误解的方面。诸如jQuery之类的库使它变得更容易，但是对表面之下发生的事情有一点了解仍然很有用。

在本文中，我们将实现事件等待时间，即，对事件的响应将在事件触发后的一段时间内发生。在创建下拉菜单等情况下，这通常很有用。因此，让我们从一些HTML和CSS代码开始（就本示例而言，它保持简短，因此没有DOCTYPE）…


<html>
<head>
<title>Latency test</title>

<style type="text/css">
#element1
{
	width: 20em;
	margin: 20px;
	background-color: #dff;
	border: 2px solid #00d;
}

#para1
{
	text-align: center;
	padding: 10px;
	margin: 30px;
	background-color: #ccc;
	border: 1px solid #000;
}
</style>

</head>
<body>

<div id="element1">
	<p id="para1">Hover over me...</p>
</div>

</body>
</html>

这只会产生一个类似于以下内容的框…

Box image

现在，我们在结束body标签之前添加一些JavaScript。


<script type="text/javascript">

window.onload = function() {

	// get nodes
	var element1 = document.getElementById("element1");
	var para1 = document.getElementById("para1");

	// define events
	if (element1 && para1) {
		element1.onmouseover = Handler;
		element1.onmouseout = Handler;
	}

	// event handler
	function Handler(e) {
		e = (e ? e : window.event);
		var on = (e.type == "mouseover");
		Highlight(on);
		return false;
	}

	// highlight or dim element (pass true|false)
	function Highlight(on) {
		para1.firstChild.nodeValue = (on ? "over" : "out");
		element1.style.backgroundColor = (on ? "#ffd" : "#dff");
		if (!on) alert("moved out");
	}

};

</script>

这将添加几个（DOM0）事件，当光标移至浅蓝色element1 div上方或上方时，将触发这些事件。调用事件处理程序函数以解决IE不一致问题，并发现是否触发了鼠标悬停事件。高亮功能传递为true（鼠标移过）或false（鼠标移出），并且它会相应地更改段落文本和背景颜色。最后，如果将鼠标移出，则会显示一个警告框。

该脚本有效，但是，当我们将鼠标移到灰色段落框中时，将出现“已移出”警报。发生这种情况是因为浏览器触发了两个事件– element1的鼠标移出和para1的鼠标移开。尽管我们没有为para1委派事件处理程序，但是浏览器实现了一种称为冒泡的技术，事件将在element1的所有后代中传播。

在此示例中，我们仅关心是否触发的最后一个事件是没有立即将鼠标悬停在其后的mouseout。因此，我们可以在Handler（）函数中解决此问题，并增加一点事件延迟：


	var timer;
	function Handler(e) {
		e = (e ? e : window.event);
		var on = (e.type == "mouseover");
		if (timer) clearTimeout(timer);
		timer = setTimeout( function() { Highlight(on); }, 300);
		return false;
	}

发生事件时，我们将清除所有现有的超时。然后创建一个新的超时，该超时将在300毫秒后调用Highlight功能（Highlight（on）包含在函数中，因此闭包将保留“ on”的值）。此过程使Highlight（）的执行频率不可能超过每300毫秒一次。调用它时，只有“ on”的最新值可用。

重新加载页面，您会注意到在发生任何事件动画之前有短暂的延迟。此外，仅当您将鼠标移到蓝色的＃element1框之外时，才会显示警报。

我希望您发现该技术在其他JavaScript项目中有用。

From: https://www.sitepoint.com/javascript-event-latency/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在JavaScript中实现事件延迟

在JavaScript处理浏览器事件可能是最耗时的，令人沮丧，误解客户端编程的各个方面。库如jQuery的更容易，但它仍然是有用的发生了什么事情的表面之下的小知识。在这篇文章中，我们将实现事件的等待时间，即它发射之后会出现一点点时间对事件的响应。这是如创建下拉菜单的情况下往往是有用的。因此，让我们用一点HTML和CSS代码（它的这个例子的目的，保持短暂的，因此没有DOCTYPE）开始....
复制链接

扫一扫