javascript 延迟_在JavaScript中实现事件延迟

最新推荐文章于 2023-04-06 17:06:13 发布

dingshi7798

最新推荐文章于 2023-04-06 17:06:13 发布

阅读量159

点赞数

文章标签： js javascript html5 html web ViewUI

原文链接：https://www.sitepoint.com/javascript-event-latency/

版权

javascript 延迟

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项目中有用。