js使用setTimeout不执行？

Question

我要在移动端实现点击按钮颜色变化的（类似pc的hover效果）效果，点击后颜色变化停留一秒钟，然后变回去？第一种方法var icon_timer;$('.nav li .glyphicon-menu-down').on('click', function(e) {    if ($(window).width() < 991) {        $(this).addClass('touch-hov');        clearTimeout(icon_timer);        icon_timer = setTimeout(function() {$(this).removeClass('touch-hov')},1000);    }});发现settimeout中的的removeclass总是不执行？第二种方法$('.nav li>div').on('touchstart click', function(e) {    if ($(window).width() < 991) {        e.stopPropagation();        $(this).addClass('touch-hov');        clearTimeout(div_timer);    }});$('.nav li>div').on('touchend', function() {    div_timer = setTimeout(function() {$(this).removeClass('touch-hov')},1000);});使用这种方法有时不进入touchend事件，进去了 setTimeout也不执行？不知道是什么原因造成的？

Answer 1

为何不用CSS3做？
根据你的需求，add class之后CSS3的animation以及transition 是完全可以实现你想要的效果
参考 CSS3 transition 以及 Animation属性

--update2
至于你的问题，属于this指向问题，你可以自己debugger看看this是什么

Answer 2

this绑定问题

$('.nav li .glyphicon-menu-down').on('click', function(e) {

    var $el = $(this);

    if ($(window).width() < 991) {

        $(this).addClass('touch-hov');

        clearTimeout(icon_timer);

        icon_timer = setTimeout(function() {$el.removeClass('touch-hov')},1000);

    }

});