1

輝くCSS効果は次のとおりです。

//Public Variables.
var clear_interval;
var stop_set_time_out;

function record_css_effect() {
    clear_interval = setInterval(

    function() {
        rec_block.css('background-color', "red");
        stop_set_time_out = setTimeout(function() {
            rec_block.css('background-color', "green");
        }, 500)
    }, 1000);
};

そして別の関数で、私は次のように呼び出します。

function stop_record() {
    alert("Stop record.");
    clearTimeout(stop_set_time_out);
    clearInterval(clear_interval);
}​

初めて光るのが止まります。

record_css_effect()2回目は、関数を呼び出さなかったのですが、光る効果が自動的に発生しました...つまり、が機能clearTimeoutしclearIntervalません...

それはなぜですか、そしてどうすればそれを達成できますか？

アップデート：

実際、私はclearInterval（clear_interval）;を使用しています。多くの場所で。
ユーザーが記録を取りたいので、ボタンを押すと、pop_record_window（）が呼び出されます。


function pop_record_window()
{
 $('#start_and_stop_rec').click
 (
    function(){ record_voice(); }
 ) 
}
function record_voice()
{
    record_css_effect();
    REC= $("#start_and_stop_rec");
    if(REC.prop("value")=="record")
    {
        alert("Start to record");           
        alert( dir_path + User_Editime + "/rec"+"/" + "P" + current_page + "_" + records_pages_arr[current_page].get_obj_num() +".mp3");
        current_rec_path= dir_path + User_Editime + "/rec"+"/" + "P" + current_page + "_" + records_pages_arr[current_page].get_obj_num() +".mp3";
        cur_record_file= new Media(current_rec_path,onSuccess, onError);
        cur_record_file.startRecord();  

        $('#stop_rec').bind("click", function(){

            clearTimeout( stop_set_time_out );
            clearInterval( clear_interval ); 

        });

        REC.prop("value","stop");
    }
    else if(REC.prop("value") == "stop")
    {
        stop_record();
        cur_record_file.stopRecord();           

        clearInterval( clear_interval );
        //make visibility hidden!
        REC.prop("value","record");
    }   
};

しかし、2回目以降、ユーザーはボタンstart_and_stop_recを押さなかったため、光る効果が発生します。ただし、if（REC.prop（ "value"）== "record"）条件内のコードは実行されません。

4

1 に答える 1

2

record_css_effect()複数回呼び出すと、複数の間隔が開始される場合がありますが、最後のinterval-idのみがに保存されclear_intervalます。一度に1つの間隔のみが実行されていることを確認することにより、これが発生するのを防ぐことができます。

//Public Variables.
var clear_interval;
var stop_set_time_out;

function record_css_effect() {
    if (clear_interval !== null) // if a timer is already returning don't start another
        return;

    clear_interval = setInterval(function () {
        rec_block.css('background-color', 'red');
        stop_set_time_out = setTimeout(function () {
            rec_block.css('background-color', 'green');
        }, 500)
    }, 1000);
};

function stop_record() {
    alert("Stop record.");
    clearTimeout(stop_set_time_out);
    clearInterval(clear_interval);
    stop_set_time_out = clear_interval = null;
}

次のように、コードを少し単純にして（を削除することでsetTimeout）、デバッグを容易にすることもできます。

//Public Variables.
var clear_interval, isRed = false;

function record_css_effect() {
    if (clear_interval !== null) // if a timer is already returning don't start another
        return;

    clear_interval = setInterval(function () {
        if (isRed) {
            rec_block.css('background-color', 'red');
            isRed = false;
        } else {
            rec_block.css('background-color', 'green');
            isRed = true;
        }
    }, 500);
};

function stop_record() {
    alert("Stop record.");
    clearInterval(clear_interval);
    clear_interval = null;
}?
于 2012-12-22T12:38:00.613 に答える