开发者社区> 问答> 正文

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

想要实现效果:
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以上时,才能实现键盘输入后,单元格内容改变并立即停止闪烁。
这是为什么?
前端新人一枚,代码可能有一些未意识到的不合理的地方,请各位海涵!

展开
收起
杨冬芳 2016-06-06 16:36:11 2356 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista
    clearInterval(blinkSet);
    $cell.stop(true).css('opacity', 1);
    $cell.text(realKey);
    2019-07-17 19:28:58
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载