JS中BOM 浏览器对象 提供的定时器

news2024/11/24 19:57:02

window对象提供了2个定时器方法:
settTimeout()和setInterval()


1.setTimeout()定时器
语法:

window.setTimeout(调用函数,[延迟的毫秒数]);

延迟时间可以省略,省略则为0

用于设置一个定时器,该定时器再定时器到期后执行调用函数

写法一:

    <script>
      setTimeout(
        function () {
          console.log("时间到了");
        },
        [2000]
      ); //window可以省略
    </script>

写法二:

    <script>
      function callback() {
        console.log("bomb");
      }
      setTimeout("callback()", 3000);
    </script>

繁琐,不提倡

页面中可能有很多的定时器,我们经常给定时器家标识符(取名字)

setTimeout() 也叫回调函数
即等待时间结束,再调用函数

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="./imgs/1.jpg" alt="" class="ad" />
    <script>
      var ad = document.querySelector(".ad");
      setTimeout(function () {
        ad.style.display = "none";
      }, 3000);
    </script>
  </body>
</html>

打开后页面显示出大大的海绵宝宝,3秒后消失

在这里插入图片描述

停止setTimeout()定时器

语法:

window.clearTimeout(timeoutID)

clearTimeout方法取消之前通过调用setTimeout()建立的定时器

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击停止定时器</button>
    <script>
      alert("爆炸计时ing");
      var btn = document.querySelector("button");
      var timer = setTimeout(function () {
        //给定时器取名方便调用
        alert("爆炸了");
      }, 1000);
      btn.addEventListener("click", function () {
        clearTimeout(timer);
        alert("小子,你成功阻止了爆炸,明天来毛利侦探事务所上班吧");
      });
    </script>
  </body>
</html>


2.setInterval()定时器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/141841.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【nodejs】npm与包

1、什么是包 Node.js中的第三方模块又叫包 2、包的来源 由第三方个人或团队开发出来的&#xff0c;免费供所有人使用 3、为什么需要包 由于Node.js的内置模块仅提供了一些底层的API&#xff0c;导致在基于内置模块进行项目开发时&#xff0c;效率很低。 包是基于内置模块封装出…

杨校老师课堂之IntellJ IDEA的使用技巧

下载地址&#xff1a; https://www.jetbrains.com.cn/idea/download/#sectionwindows 一、常规操作 1、忽略大小写&#xff0c;进行提示 2、启用Idea时&#xff0c;默认不再打开上次项目 3、设置主题 4、设置默认的字体 5、修改类头的文档注释信息 6、设置项目文件编码 7、统一…

electron与jquery起冲突,使用jquery报错解决方法

问题原因&#xff1a;Electron 为了整合 Node.js&#xff0c;会在 DOM 加入 module、exports、require 等模块和函数&#xff0c;和jQuery、RequireJS、Meteor、AngularJS 等发生冲突。 暴力解决方法&#xff1a;去除node功能加持&#xff0c;在加载browserWindow或者browserVi…

C++:闭包:闭包Closure理解

一&#xff1a;什么是闭包 闭包有很多定义&#xff0c;一种说法是&#xff1a;闭包是带有上下文的函数&#xff0c;说白了&#xff0c;就是有状态的函数&#xff0c;这其实就是一个类&#xff0c;换个名字而已。 一个函数&#xff0c;带上一个状态&#xff0c;就变成了闭包&…

共享模型之管程(四)

1.wait/notify 1.1.为什么需要wait? 小故事: ①.假设多个用户(线程)都需要进入房间使用算盘(CPU)进行计算工作,但是为了保证计算过程中的安全,老王设计了一把锁(Synchronized),每次只允许一个用户(线程)拿到钥匙进入房间(成为Owner线程); ②.小南(线程)费了九牛二虎之力,抢…

【Docker】搭建Zookeeper集群

【Docker】搭建Zookeeper集群 下载镜像 docker pull zookeeper:3.5.8wy:study wy$ docker pull zookeeper:3.5.8 3.5.8: Pulling from library/zookeeperDigest: sha256:12af523731cbe390f5332d6c1e254f1d56c734a786910d5582653445a5cee299 Status: Downloaded newer image f…

Allegro174版本新功能介绍之动态铜皮对单独层面参数设置

Allegro174版本新功能介绍之动态铜皮对单独层面参数设置 Allegro升级到了174版本的时候,可以支持动态铜皮对单独的层面进行参数设置,如下图 具体操作如下 在低版本166以及172的时候,只有Global Dynamic Shape Parameter设置,如下图,只有全局的铜皮参数设置升级到了174时候…

WMS智能仓储管理系统源码 SpringMVC物流仓库管理系统源码

淘源码&#xff1a;国内知名的源码免费下载平台 需要源码学习可私信我。 系统介绍&#xff1a; 基于SpringMVCHibernatMinidao&#xff08;类Mybatis&#xff09;Easyui&#xff08;UI库&#xff09; Jquery Boostrap Ehcache Redis Ztree等基础架构开发的物流仓库管理系…

人脸识别:我是如何工作的?

任何自动人脸识别过程都必须考虑导致其复杂性的几个因素&#xff0c;因为人脸是一个动态实体&#xff0c;在多个因素的影响下不断变化&#xff0c;例如光照、姿势、年龄……这三个参数中的任何一个的变化都会导致同一个人的两幅图像之间的误差值大于不同个体的两幅图像之间的误…

分享136个PHP源码,总有一款适合您

PHP源码 分享136个PHP源码&#xff0c;总有一款适合您 136个PHP源码下载链接&#xff1a;https://pan.baidu.com/s/1A5sR357dh_SlS7pu33lW1Q?pwdkzgn 提取码&#xff1a;kzgn import os# 查找指定文件夹下所有相同名称的文件 def search_file(dirPath, fileName):dirs os…

红中私教-文件上传漏洞DVWA靶场实战(浅析)

前言 &#x1f340;作者简介&#xff1a;被吉师散养、喜欢前端、学过后端、练过CTF、玩过DOS、不喜欢java的不知名学生。 &#x1f341;个人主页&#xff1a;红中 首先呢&#xff0c;针对于文件上传漏洞 这个漏洞为什么存在&#xff1f;目的是什么&#xff1f;我们为什幺要攻击…

开发环境和测试环境共用Eureka

问题描述 在开发过程中会遇到一种情况&#xff0c;那就是只需要修改一个服务&#xff0c;但是这个服务依赖了其他的3个服务&#xff0c;导致开发人员在本地也要启动其他的3个服务&#xff0c;还要启动一个Eureka注册中心。问题显而易见&#xff0c;在依赖过多的情况下&#xf…

一种多维数据库的数据事务专利解读

什么是事务&#xff1f; 事务是数据库系统中的核心机制。我们要理解下事务概念&#xff1a;什么是事务呢&#xff1f;事务是并发控制的单位&#xff0c;是用户定义的一个操作序列。有四个特性(ACID)&#xff1a; 原子性(Atomicity)&#xff1a; 事务是数据库的逻辑工作单位&…

使用 VSCode 开发的必备插件,你都安装了吗?

0️⃣前言 VSCode是由微软研发的一款免费、开源的跨平台代码编辑器&#xff0c;目前是前端开发使用最多的一款软件开发工具。 因为每个开发者所接触项目、所有技术不同, 用到的插件不同, 但总有几个插件基本是必备的, 以下就给出一些插件推荐&#xff0c;希望能给大家一些参考。…

腾讯会议发布录屏工具“会记”,让云端视频协作随用随录、随享随看

随着云端协同成为新常态&#xff0c;企业和组织沟通的形式也在不断丰富。1月5日&#xff0c;腾讯会议发布云端录屏工具“会记”&#xff0c; 用户在腾讯会议中就能自由使用人像、屏幕、声音、窗口等多种组合方式进行录制&#xff0c;录制完成后视频将自动上传至云端&#xff0c…

Centos7.9安装WebLogic详细步骤

目录 一、weblogic下载 二、准备环境 三、创建用户和组 四、安装jdk 安装 五、安装WebLogic 1、使用root用户创建目录/opt/weblogic并授权 2.创建 oraInst.loc 文件 3、创建wls.rsp 响应文件 4、安装weblogic 5、静默创建域 六、启动weblogic 一、weblogic下载 直…

程序员面试中一面、二面、三面有什么区别?

很多公司面试都分一面、二面、三面甚至更多&#xff0c;大家可能会好奇&#xff0c;为什么要面这么多面&#xff0c;每一面又有啥区别呢&#xff1f; 首先我来回答下为什么要这么多面&#xff0c;最核心的是最后3点&#xff1a; 如果光是一个人面&#xff0c;担心会看走眼&…

解决IDEA中ctrl+shift+f快捷键搜索没反应的问题

文章目录0写在前面1 问题解决1.1 直接切换英文输入法1.2 win10 输入法1.3 搜狗输入法1.4 其他2 写在末尾0写在前面 今天想使用《在文件中查询》功能&#xff0c;使用ctrlshiftf进行搜索的时候&#xff0c;疯狂的按组合键一直没用。最后用手点的…… 原因是IDEA的快捷键与输入…

【 java 集合】List接口常用方法总结

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

五、条件构造器和常用接口

文章目录五、条件构造器和常用接口1、wapper介绍2、QueryWrapper2.1 例1&#xff1a;组装查询条件2.2 例2&#xff1a;组装排序条件2.3 例3&#xff1a;组装删除条件2.4 例4&#xff1a;条件的优先级2.5 例5&#xff1a;组装select子句2.6 例6&#xff1a;实现子查询3、UpdateW…