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> - 标签中）

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：我在计算机上测试了这个（localhost，谷歌浏览器），fadingFunc确实在全局范围内保存了一个值（在开发者模式下通过控制台测试）

Answer 1

所以，如果我得到它 - 你希望按钮内的X闪烁，而帖子请求等待响应。

您的代码几乎就在那里，但您没有正确使用setInterval，而您选择的方法很差。首先，我们将修复您的代码，然后使用CSS动画检查我的方法。

修复您的代码：

代码必须放在<head>标记内，因为您正在使用内联调用。
删除所有不需要的window. - 使用setInterval(代替window.setInterval。
设置执行间隔功能时，使用函数setInterval(function(){ fadeBlink(uurID); }, 2000)

查看工作：JSFIDDLE

我认为对你更好的第二种方法是在请求之前添加一个类，并在完成后删除它。 obviuslly类将动画。

第二种方法：JSFIDDLE

第二个appraoch代码：

<强> 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 个答案: