js bom bom pink老师短信发送倒计时if else位置问题

最新推荐文章于 2022-09-23 18:33:51 发布

weixin_46032763

最新推荐文章于 2022-09-23 18:33:51 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/weixin_46032763/article/details/107941636

版权

使用断点调试可见明显分别如把else{}内容放在if前边利用chrome浏览器断点调试可看出如何从2直接跳过1变为发送

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;
        // var timer = null;
        btn.addEventListener('click', function() {
            // 首次先隔上3s再首次调用函数
            this.disabled = true;
            var timer = setInterval(function() {
                // 如把else{}内容放在前边，按钮显示2，time--变为1，判断if条件不成立，跳过if{}进入3s间歇，间歇结束，按钮本应该显示1，随后time--变为0，if条件成立关闭定时器，按钮复用并且显示内容覆盖刚才的1更新成发送，所以如把else{}内容写在if前，会导致按钮无法显示1直接从2变为按钮复用后的发送。
                /*  btn.innerHTML = time + '';
                     time--; */
                //  if{}不能放在定时器外边，即便按钮复用后不再需要定时，但time需要用到定时阶段的结尾的time所以必须放在定时器函数里边。如放在定时器外边time恒等于3if条件永远不会成立
                if (time === 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 3;
                }
                // 不把else内容放在前边，当time=1，按钮显示1，随后time=0，随后进入3s休息间歇，间歇结束if条件成立，关闭定时器，按钮复用且内容变为发送。
                else {
                    btn.innerHTML = time + '';
                    time--;
                }

            }, 2000);


        });
    </script>
</body>

</html>

weixin_46032763

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js bom bom pink老师短信发送倒计时if else位置问题

使用断点调试可见明显分别如把else{}内容放在if前边利用chrome浏览器断点调试可看出如何从2直接跳过1变为发送<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
复制链接

扫一扫