1

私の主な質問は次のとおりです。clearTimeout（）はタイマーを停止し、タイマー内で関数を実行しませんか？または、タイムアウトをクリアしてすぐに関数を実行しますか？

これが私の例です

$('input').keyup(function(){
        var thisClass = $(this).attr('class').split(" ");
        var thisValue = $(this).val();
        var thisError = $(this).parent().siblings('.error');
        var thisTimeout;
        if(thisClass[1] == "letters"){
            if(thisValue.length <= 1){
                thisTimeout = setTimeout(function(){
                    thisError.html("You must have at least 2 characters");  
                    thisError.show();
                }, 800);
            } else {
                clearTimeout(thisTimeout);
                thisError.hide();
                thisError.html(""); 
            }
        }

    });

これは、入力ボックスに少なくとも2文字が含まれているかどうかを確認するコードチェックの一部です。現在、このコードは、2文字以下の場合、800ミリ秒後にタイムアウトを実行します。入力ボックスが2文字を超える場合、十分に速く入力していると、入力を終了してもエラーボックスが表示されます。もう1文字入力することでエラーをクリアできますが、名前をすばやく入力すると、入力が完了するとエラーが表示されます。

私もこのコードを持っています：

$('input').keydown(function(){
        clearTimeout(thisTimeout);
        thisError.hide();
    });

Thoughtsと入力し続けると、エラーがクリアされることを期待していますか？

4

4 に答える 4

4

以前の setTimeout id を上書きしている可能性があります。したがって、それをクリアすることはできません。

var thisTimeout;
$('input').keyup(function(){
    var thisClass = $(this).attr('class').split(" ");
    var thisValue = $(this).val();
    var thisError = $(this).parent().siblings('.error');

    if(thisClass[1] == "letters"){
        if(thisValue.length <= 1){
            clearTimeout(thisTimeout); // <-- already clear the timeout here before 
                                       // starting another one
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }

});
于 2013-03-15T18:14:58.283 に答える
2

その値が保持されるように、より高いスコープに移動thisTimeoutする必要があり、以前の値を上書きする前にクリアする必要があります。

var thisTimeout;
$('input').keyup(function(){
    var thisClass = $(this).attr('class').split(" ");
    var thisValue = $(this).val();
    var thisError = $(this).parent().siblings('.error');
    if(thisClass[1] == "letters"){
        if(thisValue.length <= 1){
            clearTimeout(thisTimeout);
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }

});

参考までに、このコードも少しクリーンアップできます。

var thisTimeout;
$('input').keyup(function(){
    var self = $(this);
    var thisError = self.parent().siblings('.error');
    if (self.hasClass("letters")) {
        if(self.val().length <= 1){
            clearTimeout(thisTimeout);
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }

});
于 2013-03-15T18:21:18.193 に答える
1

すでに設定されているタイムアウトは置き換えられています..そしてクリアされていません

于 2013-03-15T18:16:55.340 に答える
1

最初の質問で、次のように尋ねました。

clearTimeout() はタイマーを停止し、タイマー内で関数を実行しませんか? それとも、タイムアウトをクリアしてすぐに関数を実行しますか?

答えは最初のオプションclearTimeoutです。タイマーを停止し、タイマー コールバックを実行しません。

コードの質問の問題は、が関数thisTimeout内で宣言されているためです。keyup関数には へのkeydown参照がありませんthisTimeout。

代わりに共有スコープに移動する必要があります。

var thisTimeout;

$('input').keyup(function(){
    var thisClass = $(this).attr('class').split(" ");
    var thisValue = $(this).val();
    var thisError = $(this).parent().siblings('.error');
    if(thisClass[1] == "letters"){
        if(thisValue.length <= 1){
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }
});

$('input').keydown(function(){
        clearTimeout(thisTimeout);
        thisError.hide();
    });
});
于 2013-03-15T18:21:20.847 に答える