正文

[javascript]记录完成轮播过程中的几个点(代码片段)

no-harm  no-harm  2022-12-29  159

关键词：

记录几个坑

之前的轮播：

完整代码：GitHub

效果预览：GitHub

最近完成的轮播：

完整代码：GitHub

效果预览：GitHub

在完成轮播中解决两个问题：

1.setInterval()会和按钮绑定的事件发生冲突。

表现为：setInterval()设置了每3S轮播一次，在没有任何动作干扰的情况下，轮播正常；但是当需要点击按钮跳转到其他图片时，从点击按钮到图片跳转成功的这段时间，假设是1S，也会计算到setInterval()设定的时间中；即从A1到A2需要3S，在A1到A2的过程中2.5S时，我们点击A3，他就不会在A3上停留3S再轮播，而是从A3到A4只需要0.5S(3-2.5)。

解决办法：给轮播组件添加监听事件，一旦鼠标移入组件范围，轮播停止；鼠标移出，轮播继续。这样就能保证每一张图片到下一张图片都需要3S的时间。

$(‘#slidesWrapper‘).on(‘mouseenter‘,function()
    window.clearInterval(timerId)
)

// 当鼠标移出
$(‘#slidesWrapper‘).on(‘mouseleave‘,function()
    timerId = setTimer()
)

2.轮播絮乱

表现为：一旦浏览器离开轮播的tab，跳转到其他的tab后过一段时间再回来，轮播的速度会加快。

解决方法：给document添加visibilitychange事件。

MDN

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.

我们只要判断：如果标签页被隐藏，则轮播停止；标签页被显示，轮播继续，就可以解决这个问题了。

如：

document.addEventListener(‘visibilitychange‘,function(e)
    if(document.hidden)
        window.clearInterval(timerId)
    else
        timerId = setTimer()
        console.log(2)
    
)

[jsonp]关于jsonp的几个点(代码片段)

...用法在阮一峰阮老师的博客里讲解得很清楚了，这里只是记录一些关于JSONP的点。回调函数的命名在阮老师的博客中举的例子是回调函数命名为foo，在实际使用环境中回调函数一般是搭配着随机数使用，使用时实时生成，使用过... 查看详情

Sprite Kit 碰撞发生在精灵之外的几个点

】SpriteKit碰撞发生在精灵之外的几个点【英文标题】：SpriteKitcollisionhappensseveralpointsoutsidethesprite【发布时间】：2014-02-1002:48:01【问题描述】：我设置了一堆SKSpriteNode。我的英雄节点不应该撞墙，如果撞墙，它会触发碰撞。这工作... 查看详情

http2提升效率的几个点

1、二进制传输，消息的解析效率更高2、头部数据压缩，传输效率更高3、多路复用，可以让请求并发执行4、服务器推送，可以主动推送数据到浏览器 http2加载图片demo：https://http2.akamai.com/demo 查看详情

kotlin委托必须重视的几个点(代码片段)

...去充分的掌握kotlin委托特性以及原理。一、委托类我们先完成一个委托类，常常用于实现类的委托模式，它的关键是通过by关键字：interfaceBasefunprint()classBaseImpl(valx:Int):Baseoverridefunprint()print(x)classDerived(b:Base):Basebybfunmain... 查看详情

自制贪吃蛇游戏中的几个“大坑”(代码片段)

　　贪吃蛇游戏已经告一段落了，在完成这个游戏的过程中，我遭遇了许多“坎坷”和“挫折”，下面就几个让我印象深刻的“挫折”做一个具体的讲解，以此来为这个贪吃蛇项目画上一个完整句号。（包括打包这个游戏时遇到... 查看详情

sybase：sybaseiq的几个系统过程

Sybase：SybaseIQ的几个系统过程sp_iqlocks显示与数据库中IQ存储区和目录存储区中的锁有关的信息。删除锁：dropconnectionXXX sp_iqwho显示所有当前用户和连接的相关信息，或显示特定用户或连接的相关信息。 sp_iqdbspace显示有关每... 查看详情

有没有一种快速的方法可以从 WebGL / Javascript 中的几个帧缓冲区中获取平均颜色？

】有没有一种快速的方法可以从WebGL/Javascript中的几个帧缓冲区中获取平均颜色？【英文标题】：IsthereafastwaytotheaveragecolorsfromseveralframebuffersinWebGL/Javascript?【发布时间】：2012-12-1318:51:03【问题描述】：我对WebGL主题非常陌生。我想... 查看详情

UIScrollView 中的几个 UITextField，被键盘覆盖

...字段被键盘覆盖。我想向上滚动视图，我以为这是iOS自动完成的，但似乎不是这样。我目前正在使查看详情

如何使用Javascript获取具有类名的几个段落的值？

】如何使用Javascript获取具有类名的几个段落的值？【英文标题】：HowtogetthevalueofseveralparagraphswiththeclassnameusingJavascript?【发布时间】：2020-10-2509:41:30【问题描述】：我想通过使用类名单击div来获取包含在div中的段落文本(p)。我尝... 查看详情

[系列]go使用defer函数要注意的几个点(代码片段)

...在函数return后去执行的。它的主要应用场景有异常处理、记录日志、清理数据、释放资源等等。这篇文章不是分享defer的应用场景，而是分享使用defer需要注意的点。咱们先从一道题开始，一起来感受下...funccalc(indexstring,a,bint)intr... 查看详情

平安城市摄像机部署过程中的几个现实问题

1.导语目前国内摄像机架设的乱象。摄像机架设的目的，用于后台图像视频处理和分析，图像的不规则和大小不一，造成后台分析系统的准确率降低，分析模型需要针对每个摄像机进行重建，造成大量的人工浪费。这样的图像变... 查看详情

平安城市摄像机部署过程中的几个现实问题

1.导语目前国内摄像机架设的乱象。摄像机架设的目的，用于后台图像视频处理和分析，图像的不规则和大小不一，造成后台分析系统的准确率降低，分析模型需要针对每个摄像机进行重建，造成大量的人工浪... 查看详情

记录小文件上传的几个例子（含进度条效果，附源码下载）(代码片段)

1、简单原生上传无javascript脚本、无进度条；借助iframe实现post提交后的无刷新效果；jquery插件ajaxFileUpload.js的实现原型。Html代码<formenctype="multipart/form-data"action="UploadFile_1"method="post"target="frameResult"><divclass="ite 查看详情

js总结之关于this应该知道的几个点(代码片段)

JS中的this对每位前端工程师都不陌生，经常看到对象这里this那里this，那什么是this？答案就是上下文对象，即被调用函数所处的环境，也就是说，this在函数内部指向了调用函数的对象。通俗的讲，就是谁调用了函数。??情况1this... 查看详情

vim中的几个技巧(代码片段)

Hello,大家好，我是爱吃香蕉的猴子，记录工作中工具的细节1、清除空格：%s/\\s+KaTeXparseerror:Undefinedcontrolsequence:\\satposition17:…/行尾空格：\\̲s̲\\+行首空格:^+\\s+2、查看格式问题：setlist3、比如&# 查看详情

选择等保测评机构需要注意的几个点

...小编就给大家来简单说说选择等保测评机构时候需要注意的几个点。选择等保测评机构需要注意的几个点第一点、选择具有资质的机构一定要查看等保测评机构是否具有正规资质，如果不清楚，可以登录网络安全等级保... 查看详情

选择等保测评机构需要注意的几个点

MS Query 中的问题设置参数

...一个执行任务的查询，但需要将几个日期设置为条件才能完成查询。我使用参数指向仪表板中的几个点，以检索查询正确执行所需的日期。访问字段中的日期设置为date/time，仪表板中的日期也设置为date/time。出于某查看详情