程序员经验分享-hwhale

【超详细~】js的三大定时器：setTimeout、setInterval、requestAnimationFrame

2023-05-16

setTimeout（表达式，时间） => 是指延迟指定时间后才调用函数，调用次数仅一次；

setInterval（表达式，时间） => 是指每隔指定的时间就指定表达式，次数不为一，好比设置时间为四秒，每隔四秒就执行眨眼这个操作，循环操作下去；

停止定时：

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

setTimeout

function f(){
    var out=setTimeout(function(){
        t.value=i++;
        f();//方法中对自身调用
    },1000);
    if(i>10){//如果超过10次，则清除 执行，并提示信息
        clearTimeout(out);
        alert("10秒钟已到");
    }
}

setInterval

setInterval(function(){
  // parseInt解析一个字符串，返回一个整数
  if(parseInt(myDiv.style.width) < 500){
    myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
    // 总长500，除以5的数字正好是百分比
    myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
  }else{
    clearInterval(timer);
  }
},16);

requestAnimationFrame

requestAnimationFrame(function fn(){
  if(parseInt(myDiv.style.width) < 500) {
    myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
    myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
    // requestAnimationFrame只传入一个参数
    timer = requestAnimationFrame(fn);
  } else {
    cancelAnimationFrame(timer);
  }
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

setTimeout

setInterval

requestAnimationFrame

三大定时器

【超详细~】js的三大定时器：setTimeout、setInterval、requestAnimationFrame 的相关文章

  • 检查 JavaScript setTimeout 是否已触发

    我希望能够通过 JavaScript 分派大量工作在浏览器中完成 从而使浏览器始终保持响应能力 我尝试采取的方法是将工作分块 将每个块传递给一个函数 然后用一个函数排队setTimeout func 0 call 我需要知道所有工作何时完成

  • 如果延迟超过 2147483648 毫秒，setTimeout 会立即触发

    问题 If the delay超过 2147483648 毫秒 24 8551 天 该函数将立即触发 Example setTimeout function console log hey 2147483648 this fires ear

  • Javascript 中是否按顺序执行相等的超时？

    假设我这样做 setTimeout foo 0 setTimeout bar 0 我可以确定 foo 会在 bar 之前开始执行吗 如果我使用 1 10 或 100 的超时值代替 0 会怎么样 简单的实验表明 在超时值相等的情况下 超时目标

  • 设置超时 Internet Explorer

    我在 MSIE 中有以下 javascript setTimeout myFunction 1000 param 这似乎适用于除 Internet Explorer 之外的所有浏览器 参数只是没有转发到函数 查看调试器 它是未定义的 par

  • 如何在Javascript中延迟setInterval？

    我现在在 JavaScript 中反复遇到一个奇怪的问题 我似乎无法拖延setInterval longer 发生情况的一个小例子 var loop var count loop setInterval start 30 function

  • 如何将参数传递给使用 setTimeout 调用的函数？

    我想将参数传递给名为 using 的函数setTimeout 我找到了这三个选项 A 1 Method 1 closure things setTimeout function whatsA A 100 Method 2 third arg

  • JavaScript setInterval 立即运行

    我找到了一种立即在 javascript 中运行间隔的解决方案 而不是等待第一个 超时 setInterval function hello console log world return hello 2500 但问题是这个解决方案不起作

  • 带有阻塞代码的 setTimeout 行为

    这是我的测试代码 小提琴here http jsfiddle net Xvh55 console log Before wait setTimeout function console log Yo 1000 var start Date

  • HTML5 视频自动播放，但有 5 秒延迟

    我的网页上有一个 20 秒长的 HTML5 视频循环作为背景 并将其设置为自动启动 视频自动播放可以延迟5秒吗 我试图在尝试播放之前让视频完全加载 以防止视频卡顿 这是我当前的代码

  • 防止 javascript setInterval 函数堆积

    我有一个在单击事件上运行的函数 该函数对我的一些动画 我正在做一个游戏 使用javascript的setIterval 所以问题是 如果用户在动画仍在显示时单击 setInterval仍在执行 则setInterval在事件堆栈中堆积 或者

  • 如何保留setTimeout参数值直到执行？

    我有一些在按键时执行的代码 并在用户键入时将数据保存到数据库中 我添加了一个 setTimeout 函数 前面有一个clearTimeout 因此并非用户输入的每个字符都会发送 Ajax 请求来保存数据 虽然 setTimeout 对于一个

  • 递归函数 vs setInterval vs setTimeout javascript

    我正在使用 NodeJs 并需要调用无限函数 但我不知道什么是最佳性能 递归函数 function test my code test 设置时间间隔 setInterval function my code 60 设置超时时间 functi

  • 反应 setState 中的 setTimeout

    this setState prevState gt score prevState score 10 rightAnswers prevState rightAnswers 1 currentQuestion setTimeout gt

  • React Hooks，useEffect 中的 setTimeout 直到结束才触发，因为状态更新

    Context 添加新消息 例如 每两秒 使用 setInterval 消息有状态 可以是旧的 也可以是新的 新添加的消息有一个 新 标志 每 5 秒后 所有 新 消息都会被指定为 旧 消息 设置超时 Problem 直到结束才触发超时 添

  • React 中的 setTimeout 和clearTimeout

    当用户使用 setTimeout 和clearTimeout 在页面上 30 秒内没有进行任何点击事件时 我正在努力创建注销功能 但每次用户点击页面上的任何内容时 剩余时间必须再次重置为 30 秒 或者作为另一个选项 将使用clearTim

  • 了解相继执行的 setTimeout() 函数

    我需要以固定的时间间隔依次执行多个函数 因此使用了setTimeout 我想确保我理解它是如何执行的 我有以下逻辑 setTimeout function Execute first function 200 setTimeout func

  • 多个requestAnimationFrame性能

    如果我要做多个动画 添加多个动画在性能方面是否可以 requestAnimationFrame回调 F 例如 function anim1 animate element 1 function anim2 animate element 2

  • setTimeout 和 jQuery：未捕获 RangeError：超出最大调用堆栈大小 [重复]

    这个问题在这里已经有答案了 我试图在页面加载时调用我的类 并每隔 X 秒重新加载结果 但是在 setTimeout 教程之后 jquery 似乎给我抛出了一个错误 考虑到它是无语法的 我不明白 未捕获的范围错误 超出最大调用堆栈大小 var

  • setTimeout 会使用 Heroku 免费的 dyno 小时吗？

    我有一个机器人 它的命令允许用户输入一条用破折号分隔的消息 然后输入指定的时间 然后将其传递给机器人 机器人在指定的时间过去后用该消息提醒用户 function reminder msg const message msg content

  • SetTimeout() 不会执行该函数

    这是我的代码片段 in VBScript Sub Main Dim timeoutTimer more scripts here more scripts here more scripts here timeoutTimer window

随机推荐

  • 无人机飞控系统硬件设计

    目录 一 飞行控制系统简介 1 飞控系统功能分析 2 飞控系统基本原理 3 飞控系统的组成部分 3 1 地面部分 3 2 中央处理器 3 3 传感器模块 3 4 传输定位模块 二 飞控系统硬件平台设计 一 飞行控制系统简介 1 飞控系统功能

  • Ubuntu20.04中怎么更换源都不行install或者update始终报错，解决方案

    更换源后安装或者更新依旧报错 xff0c 试试下面两种方法 xff0c 亲测可行 方法一 xff1a 静态ip改成动态ip 如果ip是静态改成动态ip后 xff0c 重新在试试apt update 1 vi etc netplan 00 i

  • AlphaGo 引发的中国象棋之路

    笔者是一位多年的象棋爱好者 xff0c 早在2005 xff0c 中国象棋有款软件奇兵1 04 xff0c 当时打败特级大师于幼华 xff0c 又打败了柳大华 xff0c 后期软件和计算机硬件的发展 xff0c 象棋软件又有了质的飞越 xf

  • linux驱动IO模型

    1 非阻塞 当应用层读取驱动中的数据时 xff0c 无论数据是否准备号 xff0c 都需要立即返回 open 34 dev mycdev 34 O RDWR O NOBLOCK 非阻塞方式打开 默认打开方式为阻塞方式打开 O NOBLIOC

  • ROS学习（一）工作空间，功能包，节点

    本文主要介绍建立一个功能包 xff0c 一个publisher结点 xff0c 实现话题的发布 一工作空间 1创建所需的文件夹 mkdir ros cd ros mkdir src 2工作空间的初始化 cd src catkin init

  • NVIDIA Jetson Xavier NX搭建pytorch gpu环境（超详细）

    NVIDIA Jetson Xavier NX开发套件在搭建tensorflow gpu环境时可以使用指令直接安装或者官网下载whl文件安装 作者在安装pytorch环境时总是安装不上gpu版本 报错 AssertionError Torc

  • uCOS-iii学习笔记（11）——任务信号量和任务消息队列

    理解 xff1a 任务信号量 任务消息队列是跟随任务创建而来的 xff0c 不需要额外创建 xff0c 并且他和多值信号量 消息队列有一些不同 xff0c 多值信号量他们是建立于1对多得关系 xff0c 而我们的任务信号量还有任务消息队列是

  • C语言当中什么情况下形参可以改变实参详细实例及解释

    在 C 语言中 xff0c 形参可以改变实参的值的情况与 C 43 43 类似 xff0c 也有传递指针和传递引用两种方式 传递指针 当我们传递一个指针作为函数的形参时 xff0c 函数内部同样可以通过这个指针来改变指向的实参的值 这是因为

  • git仓库与vscode关联

    git仓库与vscode关联 git安装完后 xff0c 会提示输入用户信息 a 设置用户名 xff1a git config global user name 39 你再github上注册的用户名 39 b 设置用户邮箱 xff1a gi

  • python修改全局变量

    span class token comment 全局变量 span num span class token operator 61 span span class token number 10 span span class toke

  • python函数不能修改全局变量

    span class token comment 全局变量 span num span class token operator 61 span span class token number 10 span span class toke

  • FreeRTOS笔记（六）互斥量mutex

    概念 互斥量是二进制信号量的一个变种 xff0c 开启互斥量需要在头文件FreeRTOSConfig h 设置configUSE MUTEXES 为1 互斥量和信号量的主要区别如下 互斥量用于保护资源时必须要被返还 信号量用于数据同步时不需

  • 完爆面试官！spring可能带来的一个深坑

    4步套路 xff0c 解决动态规划问题 1 确定问题状态 提炼最后一步的问题转化 2 转移方程 xff0c 把问题方程化 3 按照实际逻辑设置初始条件和边界情况 4 确定计算顺序并求解 结合实例感受下 xff1a 你有三种硬币 xff0c

  • 树莓派Raspberry Pi 2B在Kali上使用TightVNCServer灰屏

    1 将 root vnc xstartup改为 span class token shebang important bin sh span unset SESSION MANAGER unset DBUS SESSION BUS ADDR

  • STM32——UCOSIII 简介

    目录 UCOSIII简介 UCOSIII中的任务 组成 任务堆栈 任务控制块 任务函数 任务函数模板 UCOSIII系统任务 组成 空闲任务 时钟节拍任务 统计任务 定时任务 中断服务管理任务 UCOSIII任务状态 组成及状态概念 UCO

  • ARM —— 寄存器的封装

    目录 SFR 直接一对一封装 结构体封装寄存器 SFR 全称 xff1a 特殊功能寄存器 xff08 Special Function Register xff09 作用 xff1a 用于 控制片内外设 xff0c 存放 相应功能部件的 控

  • Ubuntu给Pix2.4.8刷Ardupilot固件

    全文基于waf编译器使用 waf命令 xff0c APM官网对于waf的使用描述 xff1a https github com ArduPilot ardupilot blob master BUILD md 前提 xff1a 已经在ubu

  • 程序猿面试经验总结（经验篇）

    开篇序 金九银十大家都知道吧 xff0c 的确九十月份都是跳槽旺季与招聘旺季 xff0c 无论是找工作的 招聘的单位都是特别特别的多 xff0c 多的你有时候看都看不过来 xff0c 以至于让你有时候很难选择 xff0c 其实选择对应自己的

  • STM32 HAL库和标准库的原理区别

    STM32 HAL库和标准库的原理区别 HAL简介 HAL库 xff0c HAL是Hardware Abstraction Layer的缩写 xff0c 中文名称是 xff1a 硬件抽象层 xff0c 是st公司为了更方便地进行stm32之

  • 【超详细~】js的三大定时器：setTimeout、setInterval、requestAnimationFrame

    setTimeout xff08 表达式 xff0c 时间 xff09 61 gt 是指延迟指定时间后才调用函数 xff0c 调用次数仅一次 xff1b setInterval xff08 表达式 xff0c 时间 xff09 61 gt

热门标签