实现一个hoverDelay延迟hover
实现一个hoverDelay延迟hover
author: @TiffanysBear
需求背景
经常在页面开发中,需要使用hover事件来触发相应的网络请求或页面DOM元素显示切换,需要考虑的问题就有了:
- hover动作非常快,如果一hover就请求,会造成多余请求的浪费,造成后端接口不必要的压力
- 如何判断这个用户hover是想做一定的操作,而不是鼠标误触
- 构造这个hover延迟的时候,怎样封装才能通用使用
先来看一下效果演示:
See the Pen Vue.js | Mouseover & Mouseleave by AAA_TTT
(@AAA_TTT) on CodePen.
问题思考
基于上述的问题,思考是如下:
- 当用户hover停留在某一DOM元素上一定时长时,比如500ms,才认为这个用户是实际想要做某种操作,这时候在实际的进行相应的网络请求或页面DOM元素显示切换
- 如果在500ms之前就移开,就算是用户误触误滑,不做任何处理
- 构造hover通用封装时,采用jQuery的插件开发的方式,形成通用的解决方案
代码封装
基于jQuery的插件系统,实现的hoverDelay插件方法;在每次事件之前,清空所有的计时器,重新设置延时定时器,则进行相应操作。
/**
* @file: 鼠标滑动延迟执行的JQUERY扩展方法
* @author: TiffanysBear
*
*/
$.fn.hoverDelay = function (options) {
var defaults = {
hoverDuring: 200,
outDuring: 200,
hoverEvent: function () {
$.noop();
},
outEvent: function () {
$.noop();
}
};
var sets = $.extend(defaults, options || {});
var hoverTimer;
var outTimer;
return $(this).each(function () {
$(this).hover(function () {
clearTimeout(outTimer);
hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
}, function () {
clearTimeout(hoverTimer);
outTimer = setTimeout(sets.outEvent, sets.outDuring);
});
});
};
代码使用
因为该方法是放在jQuery的原型方法上,因此所有jQuery对象都有这个方法可以使用。
$(this).hoverDelay({
hoverDuring: 500,
outDuring: 300,
hoverEvent: function () {
},
outEvent: function () {
}
});
后续思考
类似与Vue这种类似于MVVM框架的项目应该如何做hoverDelay呢?原理也是一致的;但是在细节的处理上有些不同,通过Vue绑定的 mouseover
、mouseleave
对定时器进行设置和清理也能实现需求。
html结构:
.<div id="mouse">
<a
v-on:mouseover="mouseover"
v-on:mouseleave="mouseleave">
{{message}}
</a>
</div>
css样式:
body {
background: #333;
#mouse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 280px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
color: #fff;
background: #007db9;
a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
}
}
JS代码:
new Vue({
el: '#mouse',
data: {
message: 'Hover Me!' ,
timer: null,
hoverEnterTime: 500,
hoverLeaveTime: 300
},
methods: {
mouseover: function(){
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.message = 'Good!'
}, this.hoverEnterTime);
},
mouseleave: function(){
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.message = 'Hover Me!!'
}, this.hoverEnterTime);
}
}
})
See the Pen Vue.js | Mouseover & Mouseleave by AAA_TTT
(@AAA_TTT) on CodePen.
实现一个hoverDelay延迟hover的更多相关文章
- jquery实现一个标签图标hover到上面的时候显示tooltip
设计图: 解决思路:1.在thumbnailbox.js这个插件中加入tags弹出框显示的内容,一开始让这些内容display:none; 然后再用css画出来一个三角形 实现方法: 知识点:Jque ...
- 重新想象 Windows 8 Store Apps (42) - 多线程之线程池: 延迟执行, 周期执行, 在线程池中找一个线程去执行指定的方法
[源码下载] 重新想象 Windows 8 Store Apps (42) - 多线程之线程池: 延迟执行, 周期执行, 在线程池中找一个线程去执行指定的方法 作者:webabcd 介绍重新想象 Wi ...
- JS实现类似QQ好友头像hover时显示资料卡的效果
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...
- 移动端:active,:hover无法很好触发动画的解决方案
移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类, ...
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- 【Win 10应用开发】延迟共享
延迟共享是啥呢,这么说吧,就是在应用程序打开共享面板选择共享目标时,不会设置要共享的数据,而是等到共享目标请求数据时,才会发送数据,而且,延迟操作可以在后台进行. 这样说似乎过于抽象,最好的诠释方法, ...
- ThreadPoolTimer -延迟执行, 周期执行
介绍重新想象 Windows 8 Store Apps 之 线程池 通过 ThreadPoolTimer 实现延迟执行 通过 ThreadPoolTimer 实现周期执行 通过 ThreadPool ...
- Unity3D游戏开发初探—4.开发一个“疯狂击箱子”游戏
一.预备知识—对象的”生“与”死“ (1)如何在游戏脚本程序中创建对象而不是一开始就创建好对象?->使用GameObject的静态方法:CreatePrimitive() 以上一篇的博文中的“指 ...
- iOS 分析一个支持GIF的UIImage扩展:SwiftGIF
Github:https://github.com/bahlo/SwiftGif 这个extension代码不多,主要通过Apple的ImageIO框架进行解析GIF. 整个扩展最核心还是下面的函数, ...
随机推荐
- phpstom激活
phpstom官网:https://www.jetbrains.com/phpstorm/download 激活方法:激活时选择License server 填入http://idea.imsxm.c ...
- 6.JUC之ReentrantReadWriteLock
一.概述: Java纪年1.5年,ReentrantReadWriteLock诞生于JUC,此后,国人一般称它为读写锁.人如其名,他就是一个可重入锁,同时他还是一个读写锁 a)跟ReentrantLo ...
- synchronize与lock
1. synchronize的作用 synchronize是java最原始的同步关键字,通过对方法或者代码块进行加锁实现对临界区域的保护.线程每次进去同步方法或者代码块都需要申请锁,如果锁被占用则会等 ...
- Android笔记(三十五) Android中AsyncTask
AsyncTask<Params,Progress,Result> 是一个抽象类,通常继承这个抽象类需要指定如下几个泛型参数: 1. Params :启动任务时出入参数的类型 2. P ...
- 【问题】man命令打开的手册上链接怎么展开?
参考:How to follow links in linux man pages? 前言 在使用man查看命令帮助的时候,有些文字下面会有下划线.给人的感觉是一个链接,但是又打不开.那么到底是不是链 ...
- Java线程(1)
多线程快速入门 线程与进程区别 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以 ...
- Sql Server 2017 安装问题记录
记录了我在虚拟机中安装Sql server 2017遇到的一些问题. 安装环境: Sql server 2017 + Windows Server 2012 R2 提供两个网上的下载链接: https ...
- python开发的百度翻译接口
做的一个python版的百度翻译,附代码 #!/usr/bin/env python # -*- coding:utf-8 -*- ''' 爬虫之百度翻译 需要的库有 js2py, request ...
- WinForm DevExpress使用之ChartControl控件绘制图表一——基础
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- 关于七牛云存储配置服务器CNAME的问题
以前的图片什么的都存放在七牛云(免费的那款)上,七牛相比OSS就是只能创建bucket但不能创建文件夹,这个令人很烦.最近七牛发公告说存储文件的测试域名30天后不能使用了,那我那些存储的图片的所有外链 ...