javascript - jquery中实现元素闪烁动画后使用clearInterval()函数停止闪烁为何无效？

Question

想要实现效果：
1.点击表格后表格单元闪烁
2.监听键盘输入的按键
3.修改单元格内容
4.单元格停止闪烁

jQuery代码如下：

var blinkSet;
var $cell = 'default';
$(function () {
    $('#skillKey tr').click(function () {
            $cell = $(this).find('td:first-child');
            activate();
    });
    function activate(){
        blinkSet = setInterval(function () {
        $cell.fadeTo(200, 0)
            .fadeTo(200, 1);
    }, 0);
        $(document).one('keyup', function (e) {
            var realKey='';
            switch (e.which) {
                case 96:
                    realKey = 'Num 0';
                    break;
                case 97:
                    realKey = 'Num 1';
                    break;
                case 98:
                    realKey = 'Num 2';
                    break;
                case 99:
                    realKey = 'Num 3';
                    break;
                case 100:
                    realKey = 'Num 4';
                    break;
                case 101:
                    realKey = 'Num 5';
                    break;
                case 102:
                    realKey = 'Num 6';
                    break;
                case 103:
                    realKey = 'Num 7';
                    break;
                case 104:
                    realKey = 'Num 8';
                    break;
                case 105:
                    realKey = 'Num 9';
                    break;

                case 112:
                    realKey = 'F1';
                    break;
                case 113:
                    realKey = 'F2';
                    break;
                case 114:
                    realKey = 'F3';
                    break;
                case 115:
                    realKey = 'F4';
                    break;
                case 116:
                    realKey = 'F5';
                    break;
                case 117:
                    realKey = 'F6';
                    break;
                case 118:
                    realKey = 'F7';
                    break;
                case 119:
                    realKey = 'F8';
                    break;
                case 120:
                    realKey = 'F9';
                    break;
                case 121:
                    realKey = 'F10';
                    break;
                case 122:
                    realKey = 'F11';
                    break;
                case 123:
                    realKey = 'F12';
                    break;

                case 8:
                    realKey = 'BKSP';
                    break;
                case 9:
                    realKey = 'TAB';
                    break;
                case 16:
                    realKey = 'SHIFT';
                    break;
                case 17:
                    realKey = 'CTRL';
                    break;
                case 18:
                    realKey = 'ALT';
                    break;
                case 192: realKey = '`';
                    break;
                case 27:
                    clearInterval(blinkSet);
                    $cell.css('opacity', 1);
                    return;
                default:realKey = String.fromCharCode(e.which);
            }
            clearInterval(blinkSet);
            $cell.css('opacity', 1);
            $cell.text(realKey);
        });
    }
})

点击单元格后，可以顺利实现上述1,2,3功能，但是最后单元格无法停止闪烁。
当我把setInterval（）函数中的时间间隔加大时,例如:

blinkSet = setInterval(function () {
        $cell.fadeTo(200, 0)
            .fadeTo(200, 1);
    }, 200);

单元格会在内容被修改后继续闪烁若干次才会停止闪烁，当我把时间间隔增加至大约500ms以上时，才能实现键盘输入后，单元格内容改变并立即停止闪烁。
这是为什么？
前端新人一枚，代码可能有一些未意识到的不合理的地方，请各位海涵！

Answer 1

针对你问题的答案

clearInterval(blinkSet);
$cell.stop(true).css('opacity', 1);
$cell.text(realKey);

bibi几句

知道为啥clearInterval过后，动画还在跑吗？这里跟jQuery的动画实现有关系，动画jQuery用的队列实现的。
当你点击事件触发的时候，执行

blinkSet = setInterval(function () {
    $cell.fadeTo(200, 0)
        .fadeTo(200, 1);
}, 0);

你这里用的setInterval，duration设的0，就你操作那段时间，下面这段代码执行了不知道多少次了

$cell.fadeTo(200, 0)
     .fadeTo(200, 1);
     

然后不停往动画队列添加fadeTo(200, 0)，fadeTo(200, 1)，fadeTo(200, 0)................，没把你内存撑爆就不错了。

当你clearInterval的时候，停止往动画队列添加内容。但是这个时候动画队列里还有大量的内容，还得继续一个个往下执行。

$cell.stop(true);就是清空动画队列

强烈不建议你这样写，不能为了交互代码硬凑啊。

Answer 2

你把 $(document).one 这一大段函数移到 setInterval函数内 看一看。