爱站程序员基地使用断点调试可见明显分别如把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>
