当前位置: 首页 > news >正文

使用requestAnimationFrame 实现倒计时功能js(简单秒数倒计时)

拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒

首先可能想到就是

setInterval
let count = 60
setInterval(() => {
    count --;
}, 1000)


还有一种就是 setTImeout + 函数的递归调用
let count = 60
function coundown() {
    count --;
    if(count > 0) {
        setTimeout(() => {
            countdown()
        }, 1000)
    }
}

可能很容易忽视这玩意 觉得可能就是做动画用的

其实也可以用作倒计时的使用

下面举一个简单的例子

let rafId; // 标识动画的id
 const endTime = Date.now() + 20 * 1000 // 加上20秒  // 结束时间
        function step(timestamp) {
            const diff = endTime - Date.now()
            if(diff > 0) {
                console.log(Math.floor(diff / 1000))
                rafId = window.requestAnimationFrame(step)
            }
        }
        window.requestAnimationFrame(step)
      


这东西 就是实现了简易版本的倒计时了 从实现上看 和 上面的两种其实差距不太大哈

但重点就是这玩意 可以暂停 能暂停
这里也可以吐槽下 那个Promise函数 这玩意有一点不好的就是 一旦运行必须给个结果 不能取消 中途不能取消

// 如果中途能取消的话 就很好了

window.cancelAnimationFrame(rafId)

当然实际效果 根据你自己想法来,想用啥 用啥 不用刻意去非得去用哪一个,能把任务搞定就行!
 

相关文章:

使用requestAnimationFrame 实现倒计时功能js(简单秒数倒计时)

拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒 首先可能想到就是 setInterval let count 60 setInterval(() > { count --; }, 1000) 还有一种就是 setTImeout 函数的递归调用 let count 60 function coundown() { count --; if(count >…...

jenkins通过sshPut传输文件的时候,报错Permission denied的SftpException

一、背景 使用jenkins的ssh插件传输文件至远程机器的指定目录,php程序打包后,经过zip压缩为oms.zip zip -rq oms.zip ./ -x .git/* -x .env然后我们求md5值 md5sum oms.zip最后执行传输。 09:03:02 Executing command on ssh[116.61.10.149]: mkdir…...

【Python】数据分析+数据挖掘——探索Pandas中的数据筛选

1. 前言 当涉及数据处理和分析时,Pandas是Python编程语言中最强大、灵活且广泛使用的工具之一。Pandas提供了丰富的功能和方法,使得数据的选择、筛选和处理变得简单而高效。在本博客中,我们将重点介绍Pandas中数据筛选的关键知识点&#xff…...

[数据集][目标检测]天牛数据集目标检测数据集VOC格式3050张

数据集格式:Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件,仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数):3050 标注数量(xml文件个数):3050 标注类别数:1 标注类别名称:["longicorn"] …...

python_day16_设计模式

“”“单例模式”“” “”“工厂模式”“” class Person:passclass Worker(Person):passclass Student(Person):passclass Teacher(Person):passclass Factory:def get_person(self, p_type):if p_type w:return Worker()elif p_type s:return Student()else:return Te…...

uniapp开发小程序-实现中间凸起的 tabbar

一、效果展示: 二、代码实现: 1.首先在pages.json文件中进行tabbar的样式和列表配置,代码如下: {"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/p…...

Vue引入与Vue拦截原理

1. vue引入 第一种方法&#xff1a;在线引入 <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 第二种方法&#xff1a;本地引入 2. Vue拦截原理——例题 el用于绑定id&#xff0c;data用于定义数据如下例题 <!DOCTYPE html&…...

2023年电赛---运动目标控制与自动追踪系统(E题)OpenMV方案

前言 &#xff08;1&#xff09;废话少说&#xff0c;很多人可能无法访问GitHub&#xff0c;所以我直接贴出可能要用的代码。此博客还会进行更新&#xff0c;先贴教程和代码 &#xff08;2&#xff09;视频教程&#xff1a; https://singtown.com/learn/49603/ &#xff08;3&a…...

6G内存运行Llama2-Chinese-7B-chat模型

6G内存运行Llama2-Chinese-7B-chat模型 Llama2-Chinese中文社区 第一步&#xff1a; 从huggingface下载 Llama2-Chinese-7b-Chat-GGML模型放到本地的某一目录。 第二步&#xff1a; 执行python程序 git clone https://github.com/Rayrtfr/llama2-webui.gitcd llama2-web…...

项目经理必备-项目总体计划模板-制式文件,可直接填写使用-公司可用

合同中完整项目名称&#xff0c;黑体&#xff0c;28号字&#xff0c; 居中对齐&#xff0c;项目名称较长时换行填写 当前文档名称&#xff0c;黑体&#xff0c;小初&#xff0c; 居中对齐&#xff0c;文档名称较长时 换行填写 版 本 号 x.x 编制人 日期 20xx年xx月xx日…...

正则表达式系列|(以xx开头xx结尾提取、切分、替换)

正则表达式系列|&#xff08;以xx开头xx结尾提取、切分、替换&#xff09; 文章目录 正则表达式系列|&#xff08;以xx开头xx结尾提取、切分、替换&#xff09;[TOC] 前言一、以xx开头xx结尾进行数据处理&#xff1f;1.以xx开头xx结尾对文本拆分2.以xx开头xx结尾提取内容3.以xx…...

金融学复习博迪(第1-5章)

第一部分 金融和金融体系 第1章 金融学 金融&#xff1a;资金的流通&#xff0c;即储蓄&#xff0c;信贷、汇兑、股票和证券交易等经济活动的总称。 金融学&#xff1a;研究货币流通的学问。 传统的金融学研究领域大致有两个方向&#xff1a; >宏观层面的金融市场运行理论…...

【前端知识】React 基础巩固(三十七)——自定义connect高阶组件

React 基础巩固(三十七)——自定义connect高阶组件 一、手撸一个自定义connect高阶组件 import { PureComponent } from "react"; import store from "../store";/*** connect的参数&#xff1a;* 参数一&#xff1a; 函数* 参数二&#xff1a; 函数* 返…...

前端PDF导出,使用html2Canvas和jsPDF插件

import html2Canvas from "html2canvas"; import jsPDF from "jspdf"; export function downloadPDF(dom, filename) {const scale 2;window.pageYOffset 0;// 滚动到顶部&#xff0c;避免打印不全document.documentElement.scrollTop 0;document.body.…...

Android 设备兼容性使用详解

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、设备兼容性分类二、硬件设备兼容三、软件 APP 兼容四、兼容不同语言五、兼容不同分辨率六、兼容不同屏幕方向布局七、兼容不同硬件 Feature八、兼容…...

vnc加固

0x00 认识VNC 先我们看看VNC运行的工作流程&#xff1a; VNC客户端通过浏览器或VNC Viewer连接至VNC Server&#xff1b; VNC Server传送一个对话窗口至客户端&#xff0c;要求输入连接密码&#xff08;可能为空&#xff09;&#xff0c;以及存取的VNC Server显示装置&#…...

Windows下Nginx安装与配置教程

一、前言 1、Nginx是什么&#xff1f; Nginx是一个开源的Web服务器&#xff0c;同时Nginx也提供了反向代理和负载均衡的功能。 Nginx通常作为负载均衡器暴露在外网接受用户请求&#xff0c;同时也使用其反向代理的功能&#xff0c;将用户的请求转发到实际提供服务的内网服务器…...

Iterator迭代器和Generator生成器

Iterator迭代器和for/of循环原理 Iterator迭代器规范 自己创建一个Iterator类,来实现ES6中的迭代器规范: class Iterator {constructor(assemble) {// assemble:需要迭代的数据结构this.assemble = assemble// index:记录迭代的次数(或者索引)this.index = -1}// 必须具…...

Modbus-RTU协议C#实现

1、安装依赖包 System.IO.Ports 2、读协议 /// <summary>/// Modbus-RTU协议读实例/// </summary>private static void Read(){//组装一个请求报文// 01 03 00 00 00 0A C5 CDbyte slave 0x01;//byte function 0x03; //读单个寄存器byte function 0x01; //…...

Redis学习---大数据技术之Redis(NoSQL简介、Redis简介、Redis安装、五大数据类型、相关配置、持久化)

星光下的赶路人star的个人主页 毅力是永久的享受 文章目录 1、NoSQL1.1 NoSQL数据库1.1.1 NoSQL是什么1.1.2 NoSQL的特点1.1.3 NoSQL的适用场景1.1.4 NoSQL的不适场景 1.2 NoSQL家族 2、Redis简介2.1 Redis官网2.2 Redis是什么2.3 Redis的应用场景2.3.1 配合关系型数据库做高速…...

赋能音乐自由:Unlock Music技术解密与全场景应用指南

赋能音乐自由&#xff1a;Unlock Music技术解密与全场景应用指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https:…...

模型剪枝实战指南(一):从原理到落地

1. 模型剪枝的本质&#xff1a;为什么能剪&#xff1f; 我第一次接触模型剪枝时&#xff0c;最困惑的问题是&#xff1a;神经网络训练出来的参数不都是有用的吗&#xff1f;凭什么能随便删&#xff1f;后来在移动端部署ResNet模型时才发现&#xff0c;原来大多数神经网络都存在…...

LAVIS深度解析:语言视觉智能库的架构设计与视觉问答实现原理

LAVIS深度解析&#xff1a;语言视觉智能库的架构设计与视觉问答实现原理 【免费下载链接】LAVIS LAVIS - A One-stop Library for Language-Vision Intelligence 项目地址: https://gitcode.com/gh_mirrors/la/LAVIS 语言视觉智能库LAVIS、视觉问答VQA、多模态AI、BLIP模…...

全能视频下载工具:Video-Downloader让在线视频轻松保存

全能视频下载工具&#xff1a;Video-Downloader让在线视频轻松保存 【免费下载链接】Video-Downloader 下载youku,letv,sohu,tudou,bilibili,acfun,iqiyi等网站分段视频文件&#xff0c;提供mac&win独立App。 项目地址: https://gitcode.com/gh_mirrors/vi/Video-Downloa…...

【西瓜带你学设计模式 | 第四期 - 抽象工厂模式】抽象工厂模式 —— 定义、核心结构、实战示例、优缺点与适用场景及模式区别

文章目录前言1. 抽象工厂模式是什么&#xff1f;2. 解决什么问题&#xff1f;2.1 有多个“产品维度”&#xff0c;并且需要成套切换2.2 变化点分散导致代码难维护3. 核心结构4. 示例4.1 抽象产品&#xff1a;Slice&#xff08;切片&#xff09;4.2 抽象产品&#xff1a;Pulp&am…...

乙巳马年·皇城大门春联生成终端W安全部署实践:网络配置与访问控制

乙巳马年皇城大门春联生成终端W安全部署实践&#xff1a;网络配置与访问控制 最近在星图GPU平台上部署了一个挺有意思的AI应用&#xff0c;叫“皇城大门春联生成终端W”。说白了&#xff0c;就是一个能根据你的要求&#xff0c;自动生成各种风格春联的AI模型。部署过程本身不难…...

在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果

在MATLAB中调用与可视化Lingbot-Depth-Pretrain-ViTL-14的深度估计结果 对于很多从事计算机视觉、机器人或者测绘相关研究的工程师和学者来说&#xff0c;深度估计是一个基础又关键的任务。它能从一张普通的二维图片中&#xff0c;推测出每个像素点距离相机的远近&#xff0c;…...

从零到一:深度解析BertTokenizer.from_pretrained的加载机制与实战技巧

1. 初识BertTokenizer.from_pretrained&#xff1a;你的NLP敲门砖 第一次接触Hugging Face的Transformers库时&#xff0c;我被BertTokenizer.from_pretrained()这个方法深深吸引了。它就像是一把万能钥匙&#xff0c;能快速打开各种预训练语言模型的大门。记得当时我尝试用传统…...

为什么Python社区推荐用pipx替代pip?以virtualenv安装为例演示工作流

为什么Python开发者应该用pipx替代pip&#xff1f;以virtualenv为例的完整隔离方案 当你在Ubuntu终端输入pip install virtualenv时&#xff0c;那个刺眼的externally-managed-environment错误提示就像一堵墙——这不是技术故障&#xff0c;而是Python生态进化的重要路标。传统…...

比特币钱包密码与助记词恢复工具:从入门到精通

比特币钱包密码与助记词恢复工具&#xff1a;从入门到精通 【免费下载链接】btcrecover An open source Bitcoin wallet password and seed recovery tool designed for the case where you already know most of your password/seed, but need assistance in trying different…...