Question

here if user second time clicks on the ‘#subject-class-switch the previous settimeout should dismiss how can i achive this

$('#switchsubjects').click(function(e)
{
        i++;
        var x=$('#subject-class-switch').html();
        if(i<2)
        {
            $(this).append('<ul id="dcl"><li class="ui-btn-inner ui-li">Class</li><li class="ui-btn-inner ui-li">Subjects</li></ul>');
            e.stopPropagation();
            setTimeout(rm(),10000);
        }
        else
        {
            $('#dcl').remove();
            i=0;
        }
});     

    function rm()
    {
    console.log("working");
    $('#dcl').remove();
    i=0;
    }

Answer 1

Use this:

var a;
if(i<2)
    {
        $(this).append('<ul id="dcl"><li class="ui-btn-inner ui-li">Class</li><li class="ui-btn-inner ui-li">Subjects</li></ul>');
        e.stopPropagation();
        a=setTimeout(rm(),10000);
    }
    else
    {
        $('#dcl').remove();
        i=0;
        clearTimeout(a);
    }