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);
    }
});

Answer 3

setTimeout里console.log(this)，看下this是什么。

Answer 4

延时器中的this指向不对，可以在外面用变量存储

sf每天都有n个this指向问题。。。

Answer 5

$('.nav li>div').on('touchend', function() {
    var that = this
    div_timer = setTimeout(function() {$(that).removeClass('touch-hov')},1000);
});

Answer 6

settimeout 匿名函数里面的this指向不对。。不是你操作的dom对象

Answer 7

定时器中的this是指向window的,要好好记住,

Answer 8

要用this，开始时最好来一波这样的操作—————— var that = this