Question

我想在运行setInterval时禁用我的html的某些部分，并在setInterval完成后再次将其恢复。

<div id="on">CLICK THIS : <span id="status">ENABLED</span></div>
<button id="run">LOAD</button

$('#run').on('click', function () {
    var i = 0;
    var go = setInterval(function () {
        i++;
        $('#run').html('Loading ' + i + ' or 10...');
        $('#status').html('DISABLED');
        $('#on').unbind('click keyup keypress keydown');
        if (i === 10) {
            clearInterval(go);
            $('#status').html('ENABLED');
            $('#run').html('DONE');
        }
    }, 1000);
});

$('#on').on('click', function () {
    $('#status').html('CLICKING');
});

在这里，我想要实现的是，当我点击Loading Button时，Click This不应接受任何点击事件，直到加载完成为止。但仍然会触发点击。还有其他办法吗？

[我不想使用disabled =＆＃34;禁用＆＃34;]

Answer 1

如果您不希望单击事件触发回调取消绑定事件或设置在回调中检查的标志。你也在回调中进行unbind，所以在第一次调用之前事件不会被解除

$('#run').on('click', function () {
    var i = 0;
    $('#status').html('DISABLED');
    $("#on").unbind('click keyup keypress keydown');
    var go = setInterval(function () {
        i++;
        $('#run').html('Loading ' + i + ' or 10...');
        if (i === 10) {
            clearInterval(go);
            $('#status').html('ENABLED');
            $('#run').html('DONE');
            $("#on").on("click",onDivClicked);
        }
    }, 1000);
});

$('#on').on('click', onDivClicked);

function onDivClicked(){
    $('#status').html('CLICKING');
}

或设置标志

$('#on').data("active",true);
$('#run').on('click', function () {
    var i = 0;
    $('#status').html('DISABLED');
    $("#on").data("active",false);
    var go = setInterval(function () {
        i++;
        $('#run').html('Loading ' + i + ' or 10...');
        if (i === 10) {
            clearInterval(go);
            $('#status').html('ENABLED');
            $('#run').html('DONE');
            $("#on").data("active",true);
        }
    }, 1000);
});

$('#on').on('click', function () {
    if(!$(this).data("active")) return;
    $('#status').html('CLICKING');
});

Answer 2

demo

$('#run').on('click', function () {
    var i = 0;
    var go = setInterval(function () {
        i++;
        $('#on').attr("running","true");
        $('#run').html('Loading ' + i + ' or 10...');
        $('#status').html('DISABLED');
        if (i === 10) {
            clearInterval(go);
            $('#status').html('ENABLED');
            $('#run').html('DONE');
            $('#on').removeAttr("running");
        }
    }, 1000);
});

$('#on').on('click', function () {
    var running = $(this).attr('running');

    if (typeof running !== typeof undefined && running !== false) {

    }
    else{
       $('#status').html('CLICKING');
    }
});

Answer 3

也许这有帮助

    function foo(){
        var i = 0;
        $('#on').off('click', foo);
        var go = setInterval(function () {
            i++;
            $('#run').html('Loading ' + i + ' or 10...');
            $('#status').html('DISABLED');
            $(document).unbind('click keyup keypress keydown');
            if (i === 10) {
                clearInterval(go);
                $('#on').on('click', foo);
                $('#status').html('ENABLED');
                $('#run').html('DONE');      
            }
        }

    $('#on').on('click', foo);

在setInterval运行时暂时禁用DIV

3 个答案: