使用Js定时器来定时跳转

这篇具有很好参考价值的文章主要介绍了使用Js定时器来定时跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🍎道阻且长,行则将至。🍓

Js小记🍀

记录:想实现在5秒后跳转到指定页面,使用到JS定时器Location对象。

JS定时器🌱

有两种定时器:setTimeoutsetInterval,一个是在指定时间结束后执行一次,另一个是根据指定时间循环。

Location对象🍑

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象,跳转到任意页面。使用 window.location获取,window. 可以省略。例如:
location.href = "https://www.csdn.net";


准备了一个简单的页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
</script>
</body>
</html>
  • 🌴1 >>>>> 20%

想实现在5秒后跳转到指定页面,于是在<script>写:

    document.write("5秒跳转到首页...");
    setTimeout(function (){
    	location.href = "https://https://www.csdn.net"
    },5000);

效果是达成了!


  • 🌴2 >> 出现问题 >>> 40%

但是突然想到,怎么让这个过程变为一个动态的!过一秒钟提示一下。
于是在<script>继续写,使用for循环加定时器

	document.write("5秒跳转到首页...");
    for (let i = 5; i >0; i--) {
         setTimeout(function () {
            document.write(i + "秒后跳转到首页...");
        }, 1000);
    }

结果问题来了,一秒钟就执行完了,内容倒是全出来了。
使用Js定时器来定时跳转
原因:定时器是多线程执行的,就是说这个for循环只不过是开启了多个定时器线程。


  • 🌴3 >> 方案B解决A >>>>> 60%

为了做出这个效果,于是想用循环定时器来实现:

    var i=5;
    setInterval(function () {
        document.close()
        document.write(i + "秒后跳转到首页...");
        i--
        if(i==0) {
            location.href = "https://www.csdn.net"
        }
    }, 1000);

使用document.close()可以清除内容,于是实现了
使用Js定时器来定时跳转

但是不解决使用定时器的问题,就是觉得不完美!这怎么受得了!


  • 🌴4 >> 解决A >>>>>>> 80%

既然for循环不能这么用,于是我把for循环去掉了,把定时器写进了方法里,这不就可以顺序执行了。

    var ti =5;
    function a() {
        document.close()
        document.write(ti + "秒后跳转到首页...");
        ti--
        if(ti==0) {
            location.href = "https://www.csdn.net"
        }
        setTimeout(a, 1000);
    }
    //执行
    setTimeout(a, 1000);

实现了如下效果
使用Js定时器来定时跳转


🌻END🌼

☕物有本末,事有终始,知所先后。🍭

使用Js定时器来定时跳转

🍎☝☝☝☝☝我的CSDN☝☝☝☝☝☝🍓 文章来源地址https://www.toymoban.com/news/detail-403362.html

到了这里,关于使用Js定时器来定时跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于JS定时器的整理

    在JS中定时器有非常大的作用,例如: 执行延迟操作:使用setTimeout可以在一定的延迟后执行特定的代码。这对于需要在一定时间后执行某些操作的情况非常有用,例如延迟显示提示信息、执行动画效果等。 定期刷新数据:使用 setInterval 可以定期执行某段代码,例如定时从服

    2024年02月12日
    浏览(37)
  • JS-定时器-间歇函数(一)

    定时器函数在开发中的使用场景 网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发 例如:网页中的倒计时 要实现这种需求,需要定时器函数 定时器函数有两种,今天我先讲间歇函数 定时器函数可以开启和关闭定时器 开启定时器 作用

    2024年01月17日
    浏览(47)
  • BOM/定时器/js执行机制

                 

    2023年04月25日
    浏览(39)
  • js中的定时器 setTimeout()和setInterval()

    JavaScript 定时器,有时也称为“计时器”,用来在经过指定的时间后执行某些任务,类似于我们生活中的闹钟。 在 JavaScript 中,我们可以利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。例如,您可以使用定时器定时更新页面中的广告或者显示一个

    2024年02月14日
    浏览(52)
  • 【js】JavaScript清除所有(多个)定时器的方法:

    一、停止单个定时器 二、暂停与恢复定时器 三、使用Promise来管理定时器 四、使用ES6特性管理定时器 五、案例(定时获取页面列表数据) 定时器会生成多个,即有多个定时器id,需要清除不需要的的定时器 菜单没有选中当前页面,定时器也不需要

    2024年02月03日
    浏览(59)
  • 【51单片机】如何设置中断函数(场景:在定时器工作完跳转到中断程序时,怎么识别我们的中断程序在哪里呢?)

    前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 本章是【利用定时器和中断实现一个简单项目】中的一部分,感兴趣的老铁可以跳转传送门查看 传送门 欢迎订阅 YY 滴C++专栏!更多干货持续更新!以下是传送门! YY的《C++》专

    2024年02月19日
    浏览(50)
  • 【Qt】定时器处理——定时器事件类QTimerEvent和定时器类QTimer使用

    Qt的定时器只能通过纯代码实现,定时器顾名思义,主要作用是定时特定的时间。 Qt提供了定时器事件类 QQTimerEvent 和定时器类 QTimer 实现定时器操作。 Qt提供了更高层次的定时器编程接口** QTimer **类,可以使用信号和槽,还可以设置定时一次。比较常用的方法有: QTimer::set

    2024年02月05日
    浏览(45)
  • JavaScript中两种定时器和清除定时器的使用

    ​ 定时器就是在一段特定的时间后执行某段程序代码。 以指定的时间间隔(时间单位为毫秒)调用一次函数的定时器。 轮循定时器是以指定的时间间隔(时间单位为毫秒)重复调用一个函数的定时器。 clearTimeout(timeoutID) :清除只执行一次的定时器(setTimeout函数)。 timeoutID 为

    2024年02月13日
    浏览(43)
  • flink中使用外部定时器实现定时刷新

    我们经常会使用到比如数据库中的配置表信息,而我们不希望每次都去查询db,那么我们就想定时把db配置表的数据定时加载到flink的本地内存中,那么如何实现呢? 1.在open函数中进行定时器的创建和定时加载,这个方法对于所有的RichFunction富函数都适用,包括RichMap,RichFilter,

    2024年02月06日
    浏览(43)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

    2024年02月04日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包