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