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) {&nbsp; &nbsp; var $el = $(this);&nbsp; &nbsp; if ($(window).width() < 991) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('touch-hov');&nbsp; &nbsp; &nbsp; &nbsp; clearTimeout(icon_timer);&nbsp; &nbsp; &nbsp; &nbsp; icon_timer = setTimeout(function() {$el.removeClass('touch-hov')},1000);&nbsp; &nbsp; }});