利用setTimeout实现延迟读取头像附加信息的效果（jQuery）

最新推荐文章于 2021-08-18 13:12:14 发布
最新推荐文章于 2021-08-18 13:12:14 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： Javascript 文章标签： jquery 扩展 function div class ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onlyfu/article/details/7495535
版权
先讲一下功能需求，很简单：我们需要在鼠标放上用户头像的时候，打开一个扩展层，显示一些用户的扩展信息如图：好像这个功能和延迟读取没有什么关系，细想一下，当页面上用户的头像比较多，而且比较集中的时候，你鼠标很有可能会不停的划过它们，那要是一放上去就执行程序，势必会引起很多困扰，因为你也许根本不想去操作它，要是它的加载又影响到你其它的操作，是不是很烦人。所
摘要由CSDN通过智能技术生成

先讲一下功能需求，很简单：

我们需要在鼠标放上用户头像的时候，打开一个扩展层，显示一些用户的扩展信息

如图：

好像这个功能和延迟读取没有什么关系，细想一下，当页面上用户的头像比较多，而且比较集中的时候，你鼠标很有可能会不停的划过它们，那要是一放上去就执行程序，势必会引起很多困扰，因为你也许根本不想去操作它，要是它的加载又影响到你其它的操作，是不是很烦人。所以这样的延迟读取是非常有必要的，哪怕只是延迟半秒种，都会有很好的效果。

那现在分解一下这个过程：

  1. 将鼠标指向一个用户的头像
  2. 触发onmouseover
  3. 触发setTimeout
  4. 延迟时间之后，执行加载程序，打开扩展层
  5. 鼠标移出扩展层
最低0.47元/天 解锁文章
Onlyfu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Handler源码分析
萧xiao潮
09-01 326
Handler源码分析 Android异步消息处理机制完全解析，带你从源码的角度彻底理解（郭霖） Android 异步消息处理机制 让你深入理解 Looper、Handler、Message三者关系（鸿洋） Handler源码分析 一、Handler基本使用 二、源码分析（Handler、Looper、MessageQueue之间的关系） 三、Handler源码解析 一...
settimeout默认时间_违规长时间运行的JavaScript任务需要<N>ms
weixin_39582708的博客
12-10 2745
来自：http://voidcn.com/article/p-zgijaywv-bte.html[Violation] Forced reflow while executing JavaScript took 45ms最近，我收到了这样的警告，这是我第一次得到它：[Violation] Long running JavaScript task took 234ms [Violation] For...
vue.js中settimeout遇到的问题（时间参数短效果不稳定）以及解决办法
love07070707的博客
04-12 1万+
先看效果图，这是弹窗效果，要求就是弹窗出现和消失时候不是很突兀，要有过渡效果。 首先看弹窗出现的实现思路，先加一个beforeActive类，再加一个active类。我们看审查元素，一开始display：none； 在beforeActive中display：block；只是background: transparent;然后在一定时间后再加上active类。问题就来了，在打开弹窗代码...
定时器学习：利用定时器分解耗时任务案例
weixin_34233856的博客
03-29 4247
对于执行时间过长的脚本，有的浏览器会弹出警告，说页面无响应。有的浏览器会直接终止脚本。总而言之，浏览器不希望某一个代码块长时间处于运行状态，因为js是单线程的。一个代码块长时间运行，将会导致其他任何任务都必须等待。从用户体验上来说，很有可能发生页面渲染卡顿或者点击事件无响应的状态。 如果一段脚本的运行时间超过5秒，有些浏览器（比如Fire...
用setTimeout模拟setInterval定时器
宁静致远
10-14 2151
1.setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器 var timerId = setTimeout(func|code, delay); clearTimeout(timerId);//取消定时器 setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数 2.setInterval() setInt
js setTimeout实现延迟关闭弹出层
10-29
有时候我们希望弹出层能够实现延迟关闭，并且鼠标在弹出层区域移动的时候能够保持显现，下面是具体的实现代码。
Jquery实现用户信息异步验证源码.zip
06-18
本资源"Jquery实现用户信息异步验证源码.zip"提供了一种使用jQuery进行用户信息实时验证的方法，这对于构建用户友好的Web应用程序至关重要。异步验证允许在用户输入时立即检查数据的有效性，而无需等待页面刷新，...
JavaScript使用setTimeout实现延迟弹出警告框的方法
10-24
主要介绍了JavaScript使用setTimeout实现延迟弹出警告框的方法,实例分析了javascript中setTimeout函数的使用技巧,非常具有实用价值,需要的朋友可以参考下
jQuery实现延迟跳转的方法
10-24
主要介绍了jQuery实现延迟跳转的方法,涉及jQuery中setTimeout方法延迟触发的使用技巧,需要的朋友可以参考下
jQuery-实现文字无缝滚动效果.zip
07-11
在这个“jQuery-实现文字无缝滚动效果.zip”压缩包中，包含了一个利用jQuery实现的文字滚动效果的代码示例。接下来，我们将详细讨论这个知识点。 一、jQuery基础知识 1. 选择器：jQuery提供了丰富的选择器，如ID...
Vue项目中浏览器终端警告[Violation] ‘click‘ handler took 1137ms
热门推荐
大牛的博客
08-18 1万+
出现这种问题怎么办呢? 1.首先理解报错的意思 2.找到出错的位置 3根据警告提示来找错 解决 这个警告说的是单击处理程序耗时太长了 然后去找报错的位置,一般在后面都会跟着位置在哪一行,但是我很幸运的没有,这就很难受,只能自己找,既然是单击事件,那肯定是在我做了单击之后报的错,看了一下代码如下 <el-button size="small" type="primary" @click="submitForm">确定</el-button> submit...
setTimeout()中容易忽视的要点
个人前端记录
05-28 8883
setTimeout语法： var timeoutId = scope.setTimeout(function[, delay, param1, param2....]); var timeoutId = scope.setTimeout(function[, delay]); var timeoutId = scope.setTimeout(code[, delay]); setTi...
计算机 延时函数,jquery setTimeOut实现事件函数延时加载
weixin_32330765的博客
07-26 424
要实现延时加载我们有很多方法，下面我先介绍利用jquery 事件，然后再介绍利用setTimeOut函数实现定时执行了，各位朋友有兴趣可参考。在 Window load 事件中，我们可以进行延时处理，这样当页面加载时可以处理一些事件。代码如下(function fn() {fn.now = +new Date;$(window).load(function () {if (+new Date - ...
利用setTimeout自动循环显示图片或自动刷新html页面
编程岁月
08-29 4869
New Page 1 dim timeoutID timeoutID = window.setTimeout("location.reload",5000,"vbscript") timeoutID = window.setTimeout("NextPic",5000,"vbscript") document.write now dim i  i=0 dim Pic(1) Pic(0)="htt
JS实现停留几秒sleep，Js中for循环的阻塞机制，setTimeout延迟执行
weixin_33807284的博客
01-06 3388
//第一种，使用while循环 function sleep(delay) { var start = (new Date()).getTime(); while((new Date()).getTime() - start < delay) { continue; } } //或者使用for循环 function slee...
js-点击超链接延迟3秒后跳转 应用setTimeout()方法@LesleyZhangLu
qq_39722370的博客
11-26 2900
一个非常简便的方法，三秒钟后跳转到find_friends.jsp页面。 window.setTimeout("window.location='find_friends.jsp'",3000);
利用JQuery实现静态网页的背单词系统
最新发布
06-07
接下来，你可以使用JQuery的动画效果来实现单词卡片的翻转效果。可以将单词和释义分别放在两个不同的div中，然后通过JQuery的animate()方法来实现翻转效果。 最后，为了加强用户体验，你可以使用JQuery的定时器功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值