使用jQuery编写Mousestop事件插件

我最近发布了一个自己的jQuery工具提示插件，该插件非常简单，当您将鼠标悬停在某个元素上时，它基本上会弹出，没有什么花哨的地方。 但是我注意到默认的浏览器在实际显示之前有些延迟。 直到您停止在元素上四处移动鼠标时，它才会显示。 最后，在工具提示根本没有出现之前，您只需要停止一定的时间即可停止移动鼠标。

我想重新构建此功能，并最终在jQuery中编写了自己的小mousestop事件插件 ，我想我会分享。 这是一段非常简单的代码，基本上是当鼠标停在某个元素上并为计时器提供一些选项时触发的。

您可以在此处查看有关文档： jQuery mousestop插件
也可以在这里使用我的工具提示插件查看操作情况： jQuery工具提示插件

1.鼠标停止事件

首先，我们只想知道如何检测鼠标停止，这实际上很容易，只需要一个计时器就不断循环直到发生足够的延迟。

var movementTimer = null;

    $("#element").mousemove(function(e)
    {
    	clearTimeout(movementTimer);
    	movementTimer = setTimeout(function()
    	{
    		//do something here
    	}, 300);
    })

2.在鼠标移开时停止计时器

我们的滑鼠停了下来，但是当我们将鼠标移出元素时会发生什么呢？ 我们不希望触发mousestop事件，因为从技术上讲我们不会在元素上停止。 我们在这里需要做的就是添加一个mouseout事件，该事件将清除计时器以确保其不被执行。

var movementTimer = null;

    $("#element").mouseout(function(e)
    {
    	clearTimeout(movementTimer);
    })

3.设置宽限期

这是开始变得诡计多端的地方。 如果我们要设置鼠标停止事件在完全关闭之前必须触发的时间，我们将需要引入第二个计时器。

var counter = 0;
    var counterMax = 20;
    var movement = false;

    elem
    .mouseover(function(e)
    {
    	movement = true;
    	
    	//check if movement has stopped to a maximum time of 100*counterMax, after that event will not run at all unless you re-mouseover
    	displayTimer = setInterval(function()
    	{
    		counter++;
    		
    		if(counter < counterMax)
    		{
    			if(!movement)
    			{
    				//run some code
    			}
    			//else do nothing, just iterate
    		}
    	}, 100)
    })
[/js]

This starts a timer that checks to see if movement has stopped, which would be set by our previous timer. The max here is 20 intervals for 100 milliseconds each giving us a two second grace period. Since this timer now controls our function, if it does not execute within the grace period, we are done.

4. Getting Proper Coordinates
There is one more crucial piece here that we need to add. Since we are running this from the mouseover event, our event.pageX and event.pageY coordinates will be from where they entered the element, however we will probably want the mouse position of where it is now while the mouse is moving around.

[js]
    var x = null;
    var y = null;

    var movementTimer = null;

    $("#element").mousemove(function(e)
    {
    	x = e.pageX;
    	y = e.pageY;
    })

5.放在一起

现在，我们可以将所有内容整合到如下所示的插件中。 这个小jQuery插件的代码少于100行，缩小后的大小小于1KB。

（功能（$）
{
var defaultSettings =
{
timeToStop：null，//停止甚至停止运行之前停止运行的时间
delayToStop：'300'，//被视为“停止”的延迟
onMouseout：null，//将鼠标移出元素时运行的函数
onStopMove：null //停止后再次开始移动时运行的函数
};

$ .fn.mousestop =函数（功能，设置）
{
设置= $ .extend（{}，defaultSettings，设置|| {}）;

返回this.each（function（）
{
var elem = $（this）;

var Movement = false;

var displayTimer = null
var MovementTimer = null;

//只有在有时间限制可以停下鼠标时才需要使用此代码。
if（settings.timeToStop！= null）
{
var x = null;
var y = null;

var计数器= 0;
var counterMax = Math.ceil（settings.timeToStop / 100）;

元素
.mouseover（功能（e）
{
运动=真；

//检查移动是否已停止到最大时间100 * counterMax，否则该事件将不会运行，除非您重新进行鼠标悬停
displayTimer = setInterval（function（）
{
计数器++;

if（counter <counterMax）{if（！movement）{clearTimeout（displayTimer）; //清除超时以避免任何麻烦。//将事件的坐标设置为文档事件中的坐标e.pageX = x; e.pageY = y; func（e）; } //否则，什么也不做，只需要迭代} else motion = false; //我们可以关闭此功能以避免在mousemove中使用超时}，100）}）} elem .mouseout（function（e）{//计时器，以防它仍在运行clearTimeout（displayTimer）; clearTimeout（movementTimer）; counter = 0; //重置计数器，当我们再次将鼠标悬停在其上时，移动= false; //将移动返回到false设置。onMouseout（e）; //调用我们的mouseout}）.mousemove（function（e）{x = e.pageX; y = e.pageY; if（movement）//如果我们将鼠标悬停在此，将在{//清除计时器并再次设置，这将确定我们的“停止”，如果鼠标在相同位置上放置了delayToStop时间或更长时间（毫秒），就会发生clearTimeout（movementTimer）; MovementTimer = setTimeout（function（）{Movement = false; if（settings.timeToStop == null）func（e） ;}，settings.delayToStop）;} else {settings.onStopMove（e）; //调用我们的mousemove-这是在停止运动= true;}}）之后； }）; }}）（jQuery）; [/ js]我们最终为我们的插件提供了三种类型的功能，现在可以使用。 第一个是在我们在给定时间段内停止鼠标时触发的鼠标停止。 第二种功能使我们仅可以设置一次mousestop事件，只需将超时设置得很高就可以做到这一点。 第三个是鼠标停止事件完全可以触发的宽限期。 这个插件确实不需要花很长时间就可以开发出来，尤其是使用jQuery时，它的确只是按照正确的顺序将一些标志设置为off，以便定时器正常运行的问题。 总而言之，一个不错的小插件为我们的代码提供了一个额外的事件。

关于作者

Robert Nova是一位对jQuery插件特别感兴趣的Web开发人员，他正在寻找方法来帮助开发人员尽快构建他们的项目。 他是www.websanova.com的创始人，该网站致力于jQuery插件和其他创业资源。

From: https://www.sitepoint.com/writing-mousestop-event-plugin-jquery/