javascript - 请问一个按钮控制一个settimeout，延时3秒然后执行一段代码，当我连续双击的时候代码只执行了一次

Question

  setTimeout(function () {
            $("#success").parents('tr').css("background-color", "#BEBEBE");
            nowdatetime = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss');
            document.getElementById("success").parentNode.parentNode.setAttribute("id", nowdatetime);
            $("#fail").parents('tr').css("background-color", "#BEBEBE");
             nowdate = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss SS');
             document.getElementById("fail").parentNode.parentNode.setAttribute("id", nowdate);
              setTimeout(function () {
                fadeColor(
                { r: 190, g: 190, b: 190 }, //star color
                { r: 255, g: 255, b: 255 }, //end color
                function (color) {
                    document.getElementById(nowdate).style.backgroundColor = color;
                }, 1, 10);
            }, 3000);
            setTimeout(function () {
                fadeColor(
                { r: 190, g: 190, b: 190 }, //star color
                { r: 255, g: 255, b: 255 }, //end color
                function (color) { document.getElementById(nowdatetime).style.backgroundColor = color; }, 1, 10);
            }, 3000);
        }, 0);
        
        
        代码中分别有两个settimeout执行我是知道互补影响的，但是按钮连续点的时候 就乱套了

Answer 1

我们看下下面的代码:

//A
setTimeout(function(){
    console.log('timeout_0_0');
    setTimeout(function(){
        console.log('timeout_0_0_3_0');
    },3000);
    setTimeout(function(){
        console.log('timeout_0_0_3_1');
    },3000);
},0);

//B
setTimeout(function(){
    console.log('timeout_1_0');
    setTimeout(function(){
        console.log('timeout_0_1_3_0');
    },3000);
    setTimeout(function(){
        console.log('timeout_0_1_3_1');
    },3000);
},0);

如果单独执行A段代码，就是你1次点击
输出结果为
timeout_0_0
timeout_0_0_3_0
timeout_0_0_3_1

如果A，B一起执行，就是你连续点击2次
输出结果为
timeout_0_0
timeout_1_0
timeout_0_0_3_0
timeout_0_0_3_1
timeout_0_1_3_0
timeout_0_1_3_1

也就是有相同超时时间的定时器，按添加的顺序触发
setTimeout方法被执行后，会加入到JS的定时器执行队列中，JS会计算超时的时间的先后设置好触发的时间点，当事件循环检查到有定时器需要触发就执行对应的函数~~~

在你连续点击的情况下，nowdatetime和nowdate变量将被后一次timeout0定时器绑定的函数修改掉
nowdatetime = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss');
nowdate = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss SS');

而你timeout3定时器又是通过
document.getElementById(nowdate)方法在查找DOM元素，导致DOM元素会找不到而执行出错~~~

如下修改，可以保证代码执行不报错，但是不能阻止已经加入的timeout3定时器的执行

setTimeout(function () {
            $("#success").parents('tr').css("background-color", "#BEBEBE");
            var nowdatetime = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss');
            document.getElementById("success").parentNode.parentNode.setAttribute("id", nowdatetime);
            $("#fail").parents('tr').css("background-color", "#BEBEBE");
             var nowdate = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss SS');
             document.getElementById("fail").parentNode.parentNode.setAttribute("id", nowdate);
              var  nowdateDOM=document.getElementById(nowdate);
              var  nnowdatetimeDOM=document.getElementById(nowdatetime);
              setTimeout(function () {
                fadeColor(
                { r: 190, g: 190, b: 190 }, //star color
                { r: 255, g: 255, b: 255 }, //end color
                function (color) {
                    nowdateDOM.style.backgroundColor = color;
                }, 1, 10);
            }, 3000);
            setTimeout(function () {
                fadeColor(
                { r: 190, g: 190, b: 190 }, //star color
                { r: 255, g: 255, b: 255 }, //end color
                function (color) { 
                nnowdatetimeDOM.style.backgroundColor = color; }, 1, 10);
            }, 3000);
        }, 0);

Answer 2

按钮点击事件的回调
1.禁止按钮
2.执行延迟代码，延迟代码加入激活按钮的代码
这样执行之前就只能按一次

或者用变量保存先前的setTimeout，每点击一次就清掉保存的setTimeout，然后再开新的setTimeout

又或者用标记位去判断

Answer 3

应该是三秒后同时执行了两次，结果看上去好像执行了一次

Answer 4

设置执行的时候不可以点击按钮，这样如何？