实现一个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插件方法;在每次事件之前,清空所有的计时器,重新设置延时定时器,则进行相应操作。

  1. /**
  2. * @file: 鼠标滑动延迟执行的JQUERY扩展方法
  3. * @author: TiffanysBear
  4. *
  5. */
  6. $.fn.hoverDelay = function (options) {
  7. var defaults = {
  8. hoverDuring: 200,
  9. outDuring: 200,
  10. hoverEvent: function () {
  11. $.noop();
  12. },
  13. outEvent: function () {
  14. $.noop();
  15. }
  16. };
  17. var sets = $.extend(defaults, options || {});
  18. var hoverTimer;
  19. var outTimer;
  20. return $(this).each(function () {
  21. $(this).hover(function () {
  22. clearTimeout(outTimer);
  23. hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
  24. }, function () {
  25. clearTimeout(hoverTimer);
  26. outTimer = setTimeout(sets.outEvent, sets.outDuring);
  27. });
  28. });
  29. };

代码使用

因为该方法是放在jQuery的原型方法上,因此所有jQuery对象都有这个方法可以使用。

  1. $(this).hoverDelay({
  2. hoverDuring: 500,
  3. outDuring: 300,
  4. hoverEvent: function () {
  5. },
  6. outEvent: function () {
  7. }
  8. });

后续思考

类似与Vue这种类似于MVVM框架的项目应该如何做hoverDelay呢?原理也是一致的;但是在细节的处理上有些不同,通过Vue绑定的 mouseovermouseleave对定时器进行设置和清理也能实现需求。

html结构:

  1. .<div id="mouse">
  2. <a
  3. v-on:mouseover="mouseover"
  4. v-on:mouseleave="mouseleave">
  5. {{message}}
  6. </a>
  7. </div>

css样式:

  1. body {
  2. background: #333;
  3. #mouse {
  4. position: absolute;
  5. top: 50%;
  6. left: 50%;
  7. transform: translate(-50%, -50%);
  8. display: block;
  9. width: 280px;
  10. height: 50px;
  11. margin: 0 auto;
  12. line-height: 50px;
  13. text-align: center;
  14. color: #fff;
  15. background: #007db9;
  16. a {
  17. display: block;
  18. width: 100%;
  19. height: 100%;
  20. cursor: pointer;
  21. }
  22. }
  23. }

JS代码:

  1. new Vue({
  2. el: '#mouse',
  3. data: {
  4. message: 'Hover Me!' ,
  5. timer: null,
  6. hoverEnterTime: 500,
  7. hoverLeaveTime: 300
  8. },
  9. methods: {
  10. mouseover: function(){
  11. clearTimeout(this.timer);
  12. this.timer = setTimeout(() => {
  13. this.message = 'Good!'
  14. }, this.hoverEnterTime);
  15. },
  16. mouseleave: function(){
  17. clearTimeout(this.timer);
  18. this.timer = setTimeout(() => {
  19. this.message = 'Hover Me!!'
  20. }, this.hoverEnterTime);
  21. }
  22. }
  23. })

代码效果和功能演示

See the Pen Vue.js | Mouseover & Mouseleave by AAA_TTT
(@AAA_TTT) on CodePen.

实现一个hoverDelay延迟hover的更多相关文章

  1. jquery实现一个标签图标hover到上面的时候显示tooltip

    设计图: 解决思路:1.在thumbnailbox.js这个插件中加入tags弹出框显示的内容,一开始让这些内容display:none; 然后再用css画出来一个三角形 实现方法: 知识点:Jque ...

  2. 重新想象 Windows 8 Store Apps (42) - 多线程之线程池: 延迟执行, 周期执行, 在线程池中找一个线程去执行指定的方法

    [源码下载] 重新想象 Windows 8 Store Apps (42) - 多线程之线程池: 延迟执行, 周期执行, 在线程池中找一个线程去执行指定的方法 作者:webabcd 介绍重新想象 Wi ...

  3. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  4. 移动端:active,:hover无法很好触发动画的解决方案

    移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类, ...

  5. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  6. 【Win 10应用开发】延迟共享

    延迟共享是啥呢,这么说吧,就是在应用程序打开共享面板选择共享目标时,不会设置要共享的数据,而是等到共享目标请求数据时,才会发送数据,而且,延迟操作可以在后台进行. 这样说似乎过于抽象,最好的诠释方法, ...

  7. ThreadPoolTimer -延迟执行, 周期执行

    介绍重新想象 Windows 8 Store Apps 之 线程池 通过 ThreadPoolTimer 实现延迟执行 通过 ThreadPoolTimer 实现周期执行 通过 ThreadPool ...

  8. Unity3D游戏开发初探—4.开发一个“疯狂击箱子”游戏

    一.预备知识—对象的”生“与”死“ (1)如何在游戏脚本程序中创建对象而不是一开始就创建好对象?->使用GameObject的静态方法:CreatePrimitive() 以上一篇的博文中的“指 ...

  9. iOS 分析一个支持GIF的UIImage扩展:SwiftGIF

    Github:https://github.com/bahlo/SwiftGif 这个extension代码不多,主要通过Apple的ImageIO框架进行解析GIF. 整个扩展最核心还是下面的函数, ...

随机推荐

  1. phpstom激活

    phpstom官网:https://www.jetbrains.com/phpstorm/download 激活方法:激活时选择License server 填入http://idea.imsxm.c ...

  2. 6.JUC之ReentrantReadWriteLock

    一.概述: Java纪年1.5年,ReentrantReadWriteLock诞生于JUC,此后,国人一般称它为读写锁.人如其名,他就是一个可重入锁,同时他还是一个读写锁 a)跟ReentrantLo ...

  3. synchronize与lock

    1. synchronize的作用 synchronize是java最原始的同步关键字,通过对方法或者代码块进行加锁实现对临界区域的保护.线程每次进去同步方法或者代码块都需要申请锁,如果锁被占用则会等 ...

  4. Android笔记(三十五) Android中AsyncTask

    AsyncTask<Params,Progress,Result> 是一个抽象类,通常继承这个抽象类需要指定如下几个泛型参数: 1.  Params :启动任务时出入参数的类型 2.  P ...

  5. 【问题】man命令打开的手册上链接怎么展开?

    参考:How to follow links in linux man pages? 前言 在使用man查看命令帮助的时候,有些文字下面会有下划线.给人的感觉是一个链接,但是又打不开.那么到底是不是链 ...

  6. Java线程(1)

    多线程快速入门 线程与进程区别 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以 ...

  7. Sql Server 2017 安装问题记录

    记录了我在虚拟机中安装Sql server 2017遇到的一些问题. 安装环境: Sql server 2017 + Windows Server 2012 R2 提供两个网上的下载链接: https ...

  8. python开发的百度翻译接口

    做的一个python版的百度翻译,附代码 #!/usr/bin/env python # -*- coding:utf-8 -*-   ''' 爬虫之百度翻译 需要的库有 js2py, request ...

  9. WinForm DevExpress使用之ChartControl控件绘制图表一——基础

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  10. 关于七牛云存储配置服务器CNAME的问题

    以前的图片什么的都存放在七牛云(免费的那款)上,七牛相比OSS就是只能创建bucket但不能创建文件夹,这个令人很烦.最近七牛发公告说存储文件的测试域名30天后不能使用了,那我那些存储的图片的所有外链 ...