hover时显示可跟随鼠标移动的浮动框,运用函数节流与去抖进行优化
在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle)。
需要完成的效果是,鼠标在表格的单元格上时,显示一个浮动框,并且浮动框会随鼠标移动。
这是效果图,没有做成动图,应该都能想象出来:
基本效果很容易实现,用单元格的hover事件控制浮动框的显示;鼠标移出单元格,即mouseout事件触发浮动框的隐藏;
而浮动框跟随鼠标移动的效果则用mousemove事件,监听鼠标的位置,同时改变浮动框的位置。
直接放公司项目的代码,懒癌晚期...
html结构
1.页面表格
2.浮动框:
3.浮动框的css:
注意将浮动框的定位设为fixed,z-index设大一点,能置于顶层就ok了。其他样式根据需要来写。
js部分
$(document).ready(function(){
//鼠标滑过表格单元格显示浮动框
var showFloatTimer=null;
$('.table-to-float tbody tr td').hover(
function(){
clearTimeout(showFloatTimer);
showFloatTimer=setTimeout(function(e){
$('.float-wp').fadeIn(200);//浮动框淡出
},300);
}
); $('.table-to-float tbody tr td').mouseout(function(){
$('.float-wp').hide();
clearTimeout(showFloatTimer);//鼠标滑出时清除函数去抖中的定时事件
}); $('.table-to-float tbody tr td').mousemove(floatMove());
//floatMove()运行后返回一个函数对象,或什么都不返回
function floatMove(){//节流函数
var canRun=true;
return function(e){//e是mousemove的event参数
if(!canRun){return;}//如果有一个定时方法,直接返回
canRun=false;
setTimeout(function(){
var top = e.pageY+15;
var left = e.pageX+15;
$('.float-wp').css({
'top' : top + 'px',
'left': left+ 'px'
});
console.log("改变浮框位置");
canRun=true;
},150);
}
}
});
没有加函数节流和函数去抖之前,会出现以下问题:
1.当鼠标无意滑过表格单元格时,浮动框也会显示,每滑过一个单元格闪现一次;
2.快速滑过单元格时,触发hover事件,但是mouseout事件不会执行,导致浮动框不消失。
3.mousemove监听频率高,消耗系统资源。
为了解决这三个问题,增加了去抖和节流函数
概念:
函数去抖:当动作频繁触发时,只触发最后一次。
函数节流:当动作频繁触发时,隔一段时间触发一次,以降低触发频率。
代码解释:
因此,解决第一个问题运用了函数去抖,当鼠标停在一个单元格时显示浮动框,在此之前经过的单元格都不会触发浮动框显示事件。
为了解决第二个问题,对函数去抖的封装写法做了一点改动,将显示浮动框的定时器设为全局,在鼠标滑出时清除,这样就保证了滑出之后没有浮动框可以再显示。
第三问题运用函数节流来解决,降低mousemove的触发频率
没有运用函数节流之前,将鼠标滑过一个单元格的高度的距离,函数执行了30次左右
加了节流函数之后,执行次数仅为7次
在这个地方,被event参数的传递困扰了好久,因为没有意识到 floatMove() 运行之后要么返回函数对象,要么返回空
一直在研究如何将event先传入floatMove内,再传入回调函数内
冷静了一会儿之后再想想
$('.table-to-float tbody tr td').mousemove(floatMove());
这样写,当 floatMove() 运行返回函数对象时,就相当于直接在mousemove里写回调函数,所以直接在floatMove中return函数对象的地方接收参数就可以了。
hover时显示可跟随鼠标移动的浮动框,运用函数节流与去抖进行优化的更多相关文章
- JS实现类似QQ好友头像hover时显示资料卡的效果
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- css实现table中td单元格鼠标悬浮时显示更多内容
table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...
- [MFC]SDI在图片背景上实现文本跟随鼠标移动
SDI是单文档接口应用程序的简称.本文要实现的是在视图区域显示一张图片,然后在图片表层显示文字,并且文字跟随鼠标移动.思考一下,可以判断这个问题一共分为以下几个部分:1.显示图片:2.找到鼠标的位置: ...
- 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
- 关于wpf中popup跟随鼠标移动显示
最近在做一个画图工具,里面有一个功能是需要实现,当鼠标移动的时候在,鼠标的旁边显示坐标信息. 第一反应是想到了tooltip,但是tooltip有许多的限制,查询资料的过程中看到了popup,popu ...
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...
- Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子
原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...
- VC/MFC 当鼠标移到控件上时显示提示信息
VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法 ...
随机推荐
- python第十七课——列表生成式
1.列表生成式: 什么是列表生成式? 它就是一串表达式,专门用于生成列表对象,当中包含一系列的业务逻辑: 结构:简介.优雅.阅读性好:比传统获取列表对象来的更加的方便: 它是语法糖的一种: 什么是语法 ...
- 禁用wps的云文档,恢复到清爽的状态
wps安装完成后,默认会开启云文档功能,每次打开表格.文档都会显示乱七八糟的一些东西,很麻烦 不得已只好手动为wps“瘦身”: 在wps表格或者文档的快捷方式上右键,选择打开文件所在位置 找到一个最新 ...
- 1090. [SCOI2003]字符串折叠【区间DP】
Description 折叠的定义如下: 1. 一个字符串可以看成它自身的折叠.记作S S 2. X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S) SSSS…S(X个S). ...
- 1026. [SCOI2009]windy数【数位DP】
Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数? I ...
- 20145203 实验五 Java网络编程及安全
20145203 实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验要求 1.基于Java Socket实现安全传输 2 ...
- Spring源码分析(二十三)BeanFactory的后处理
摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 目录 一.激活注册的 BeanFactoryPostProcessor ...
- CSU 2056 a simple game (正反进行KMP)超级好题!!!
Description 这一天,小A和小B在玩一个游戏,他俩每人都有一个整数,然后两人轮流对他们的整数进行操作,每次在下列两个操作任选一个: (1)对整数进行翻转,如1234翻转成4321 ,1200 ...
- relu6激活函数
relu6 = min(max(features, 0), 6) This is useful in making the networks ready for fixed-point inferen ...
- mysql数据库使用insert语句插入中文数据报错
在mysql的命令行模式中,通过insert语句插入中文数据的时候报错,类似于下面这样: Incorrect string value: '\xE7\x8F' for column 'name' at ...
- 移动端利用chrome浏览器在PC端进行调试方法
由于最近工作中遇到需要在电脑上调试手机端的功能和样式,之前也没有遇到过,所以就各种百度和试验.最后终于功夫不负有心人,成功了.(那一刻心情真滴很鸡冻啊~~~~~~~~~).所以暂时记录下来.以免鸡冻过 ...