clearInterval未设置

I am trying to create a button that will toggle setInterval/clearInterval. The setInterval will function correctly, but when the button is clicked again, clearInterval is not done. Is this a variable scope issue or a problem with how the functions are setup?

http://jsfiddle.net/BxLps/1/

$(function () {
    var int;
    var onrepeat;

    $('button[id^=temp]').click(function () {
        window.id = $(this).attr("value");
        var int = setInterval(doAjax, 3000);

        if (onrepeat == false) {
            $(this).find('i').addClass("fa-spin");
            doAjax();
            int;
            onrepeat = true;
        } else {
            clearInterval(int);
            $(this).find('i').addClass("fa-spin");
            onrepeat = false;
        }
    });
});
function doAjax() {
    $.ajax({
        type: "GET",
        url: "ajax.php",
        data: "a=cur-temp&id=" + id,
        success: function (msg) {
            $("#cur-temp").html(msg);
        }
    })
};

Just remove the second declaration of int.

$(function () {

    var int;
    $('button[id^=temp]').click(function () {
        window.id = $(this).attr("value");
        int = setInterval(doAjax, 3000); //remove var to prevent new declaration

        if (onrepeat == false) {
            $(this).find('i').addClass("fa-spin");
            doAjax();
            int;
            onrepeat = true;
        } else {
            clearInterval(int);
            $(this).find('i').addClass("fa-spin");
            onrepeat = false;
        }
    });
});

JS Fiddle: http://jsfiddle.net/9tkU2/

Is this a variable scope issue?

Yes. You've used var int twice, with the second one introducing a local variable where you did want to access to outer one.

However, you still might get problems with having a single int variable for all the elements with that selector. I have now created an object which stores the interval ids per id of the element on an object, you might as well use an each loop to create an extra variable per element.

Also, your global variable id is horrible, better use a parameter for the doAjax function.

$(function () {
    var ints = {};

    $('button[id^=temp]').click(function () {
        var id = $(this).attr("value");

        if (id in ints) {
            $(this).find('i').removeClass("fa-spin");
            clearInterval(ints[id]);
            delete ints[id];
        } else {
            $(this).find('i').addClass("fa-spin");
            doAjax(id);
            ints[id] = setInterval(function() {
                doAjax(id);
            }, 3000);
        }
    });
});

The real issue is it's creating new intervals each time. Think about it, every "click" is running that code (so it's doing a setInterval).

Solution is to declare int once (and only once) outside the click. Then move the setInterval inside the condition

var int;
var onrepeat;

$('button[id^=temp]').click(function () {
    window.id = $(this).attr("value");

    if (onrepeat == false) {
        $(this).find('i').addClass("fa-spin");
        doAjax();
        int = setInterval(doAjax, 3000);
        onrepeat = true;
    } else {
        clearInterval(int);
        $(this).find('i').addClass("fa-spin");
        onrepeat = false;
    }
});