定时器延时使用函数倒计时，按钮和倒计时文字不是同时出现问题

最新推荐文章于 2024-06-19 16:49:47 发布

小小红色无花果

最新推荐文章于 2024-06-19 16:49:47 发布

阅读量94

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_45096939/article/details/130494914

版权

如下图：

问题描述：点击按钮之后，一秒钟之后倒计时的文字才出现在页面上

原因：定时器规定延时1s显示，所以倒计时的文字也是延迟1s显示在页面上

但这答不对题，想要的效果是，点击按钮页面上立即出现倒计时文字，没有1s的延迟出现！！

解决办法：在使用定时器之前调用一次函数

代码如下：

<!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>
    <div></div>
    <script>
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        var time = 5
        btn.addEventListener('click', function () {
            fn()   //在定时器之前调用一次函数，就不会出现1s的空白时间
            setInterval(fn, 1000)
        })

        function fn() {
            if (time == 0) {
                location.href = 'https://www.csdn.net/?spm=1001.2014.3001.4476'
            } else {
                div.innerHTML = '你还剩' + time + '秒到达首页'
                time--
            }
        }
        

    </script>
</body>
</html>

小小红色无花果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器延时使用函数倒计时，按钮和倒计时文字不是同时出现问题

但这答不对题，想要的效果是，点击按钮页面上立即出现倒计时文字，没有1s的延迟出现！原因：定时器规定延时1s显示，所以倒计时的文字也是延迟1s显示在页面上。问题描述：点击按钮之后，一秒钟之后倒计时的文字才出现在页面上。解决办法：在使用定时器之前调用一次函数。
复制链接

扫一扫