ClearInterval（）在现有间隔上不起作用

Question

我为一个学校项目编写了以下函数，但是clearinterval()无法正常工作。 我已经看过几个关于同一问题的问题，而且大多数时候都是范围问题。
但是，我认为我的函数使用了一个全局变量，该变量应该起作用。 没有，我也不知道为什么。 请赐教。

HTML（实际上是具有相似行的表的一部分）

<tr id="row35" data-uitval="1" class="">
    <td>
        <button type="button" id="knopje" class="tabeluur" data-uur="35" onclick="check(this)">
            <p>✕</p>
        </button>
    </td>
    <td> other cells... </td>
</tr>

代码（JavaScript，在<head> -tag中）

var fadingFunc;
var busy = false;

function check(uurID) {
    if(busy) {
        $('#foutmelding').html('Uw vorige bewerking loopt nog. Wacht totdat deze is afgelopen.')
    } else {
        uitval(uurID);
    };
};

function uitval(uurID) {

    // makes the button child (<p>) fade out and back in continuously
    fadingFunc = window.setInterval(fadeBlink(uurID), 2000);

    $.post(
        'AnswerMe.php', 
        {
        // send stuff
        }, 
        function(data) {
            if(data === 'succes: uitval toegevoegd') {
                window.clearInterval(fadingFunc);
                // do stuff
            } else if(data === 'succes: uitval verwijderd') {
                window.clearInterval(fadingFunc);
                // do stuff
            } else {
                window.clearInterval(fadingFunc);
                // do stuff
            };
        }
    );
};

注意1：由于该问题与该问题无关，因此我剥离了所有实际执行操作的代码。
注意2：我在计算机（本地主机，谷歌fadingFunc器）上对此进行了测试，并且fadingFunc确实在全局范围内保存了一个值（通过控制台在开发人员模式下进行了测试）

Answer 1

因此，如果我知道了-您希望按钮内的X闪烁，而发布请求正在等待响应。

您的代码几乎在那里，但是您没有正确使用setInterval ，并且选择了一种较差的方法来实现这一目标。 首先，我们将修复您的代码，然后使用CSS动画检验我的方法。

要修复您的代码：

由于您正在使用内联调用，因此必须将代码放在<head>标记内。
删除所有window. 不需要-使用setInterval(而不是window.setInterval 。
设置实际间隔函数时，请使用函数包装目标函数setInterval(function(){ fadeBlink(uurID); }, 2000)

看到它的工作原理： JSFIDDLE

我认为对您来说更好的第二种方法是在请求之前添加一个类，并在完成后将其删除。 全班都会动画。

第二种方法： JSFIDDLE

第二个代码：

JS

var busy = false;
function check(uurID) {
    if(busy) $('#foutmelding').html('Uw vorige bewerking loopt nog.');
    else uitval(uurID);
}
function uitval(uurID) {
    $(uurID).addClass('blink');
    busy = true;
    $.post('http://fiddle.jshell.net/_display/', 
           { test:'test' }, 
           function() {
              $(uurID).removeClass('blink');
              busy = false;
           }
    );
}

CSS

.blink p {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

@keyframes blinker {  
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

ClearInterval（）在现有间隔上不起作用

问题描述

1 个解决方案

解决方案1
0 2015-03-17 04:39:05

ClearInterval（）在现有间隔上不起作用

问题描述

1 个解决方案

解决方案1 0 2015-03-17 04:39:05

解决方案1
0 2015-03-17 04:39:05