3

Ajaxを介してリストビューの更新をリッスンしkeyup、トリガーする検索入力があります。change

次のようになります。

input.on('keyup change', function(e) {
    if (timer) {
        window.clearTimeout(timer);
    }
    timer = window.setTimeout( function() {
        timer = null;
        val = input.val();
        el = input.closest('ul');
        // run a function - triggers Ajax
        widget[func](dyn, el, lib_template, locale, val, "update");
    }, interval );
});

タイムアウトとバインドの処理を除いて、すべてうまく機能しています。これにより、単一のリクエストではなく二重の Ajax リクエストが配置されます (イベントkeyupが通過changeすると、同じ Ajax リクエストが再度トリガーされます)。

別のタイムアウトを追加することで、これを「修正」できます。

var runner = false;

input.on('keyup change', function(e) {
    if ( runner === false ){
        runner = true;
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout( function() {
            timer = null;
            val = input.val();
            el = input.closest('ul');
            widget[func](dyn, el, lib_template, locale, val, "update");
            // ssh....
            window.setTimeout( function(){ runner = false; },2500);
        }, interval );
    }
});

でもこれは全然よろしくない…。

質問:
必要な関数が 1 回だけ実行されるように、両方が起動する 2 つのバインディングを使用するにはどうすればよいですか?

編集:
Ajax 呼び出しはここでトリガーされます。

widget[func](dyn, el, lib_template, locale, val, "update");

この関数を呼び出して動的リストビューを構築します

buildListView : function( dyn,el,lib_template,locale,val,what ){
    ...
    // this calls my AJax Config "getUsers"
    $.parseJSON( dynoData[ dyn.method ](cbk, val, dyn.display) );

 });

 // config AJAX
 getUsers: function(cbk, val, recs){
  var form = "",
  pullRetailers = ( val === undefined ? "" : val ),
  service = "../services/some.cfc",
  method = "by",
  returnformat = "json",
  targetUrl = "",
  formdata = "...manually_serialized...,
  successHandler = function(objResponse, cbk) {
     cbk( objResponse );
  };
  // finally pass to the generic JSON handler
  ajaxFormSubmit( form, service, formdata, targetUrl, successHandler, "yes", "", returnformat, cbk );
}

// generic AJAX
var ajaxFormSubmit = 
    function ( form, service, formdata, targetUrl, successHandler, dataHandler, errorHandler, returnformat, type ){
    ...

    $.ajax({
        async: false,
        type: type == "" ? "get" : type,
        url: service,
        data: formdata,
        contentType: 'application/x-www-form-urlencoded',
        dataType: returnformat,
        success: function( objResponse ){
            if (objResponse.SUCCESS == true || typeof objResponse === "string" ){
                dataHandler == "yes" ? successHandler( objResponse, override ) : successHandler( override );
            }
        },  
        error: function (jqXHR, XMLHttpRequest, textStatus, errorThrown) { }
     });
}

しかし、これは、両方のイベントが私の Ajax Update をトリガーしないようにする方法に関する実際の問題に関してはあまり役に立ちません。

4

5 に答える 5

3

次のような値チェック関数を設定しようとします。

var $inputIntance = $("#path-to-your-input");
var lastInputValue;

function checkInputValue () {
    var newValue = $inputIntance.val();
    if (newValue != lastInputValue) {
        // make your AJAX call here
        lastInputValue = newValue;
        el = $inputIntance.closest('ul');
        widget[func](dyn, el, lib_template, locale, lastInputValue, "update");
    }
}

次に、好きなユーザー アクション イベントでこのチェックを起動します。

$inputIntance.on('keyup change', function(e) {
    checkInputValue();
}

またはこのように

$inputIntance.on('keyup change', checkInputValue );

更新: 1 回あたりの AJAX リクエストの数を制限する必要がある場合があります。以前のコードに時間制御機能を追加しました。以下のコードを見つけて、ここ JSFiddleでライブで試すことができます。

$(document).ready(function () {
    var $inputIntance = $("#test-input");
    var lastInputValue;
    var valueCheckTimer;
    var MIN_TIME_BETWEEN_REQUESTS = 100; //100ms
    var lastCheckWasAt = 0;

    function checkInputValue () {
        lastCheckWasAt = getTimeStamp();
        var newValue = $inputIntance.val();
        if (newValue != lastInputValue) {
            // make your AJAX call here
            lastInputValue = newValue;
            $("#output").append("<p>AJAX request on " + getTimeStamp() + "</p>");
            //el = $inputIntance.closest('ul');
            //widget[func](dyn, el, lib_template, locale, lastInputValue, "update");
        }
    }

    function getTimeStamp () {
        return (new Date()).getTime();
    }

    function checkInputValueScheduled() {
        if (valueCheckTimer) { // check is already planned: it will be performed in MIN_TIME_BETWEEN_REQUESTS
            return;
        } else { // no checks planned
            if  ((getTimeStamp() - lastCheckWasAt) > MIN_TIME_BETWEEN_REQUESTS) { // check was more than MIN_TIME_BETWEEN_REQUESTS ago
                checkInputValue();
            } else { // check was not so much time ago - schedule new check in MIN_TIME_BETWEEN_REQUESTS
                valueCheckTimer = window.setTimeout(
                    function () {
                        valueCheckTimer = null;
                        checkInputValue();
                    }, 
                    MIN_TIME_BETWEEN_REQUESTS
                );
            }
        }
    }

    $inputIntance.bind('keyup change', function(e) {
        $("#output").append("<p>input event captured</p>");
        checkInputValueScheduled();
    });
});
于 2012-12-16T10:24:58.303 に答える
1

Ok。私はそれを手に入れました（感じた1000回の試行の後...）。

これが機能するものです = 最初に発生したイベントがトリガーされ、トレーラーがブロックされます。

var isEven;
input.on('keyup change', function(e) {
    isEven = true;
    if (timer) {
        window.clearTimeout(timer);
    }
    timer = window.setTimeout( function() {
        timer = null;
        val = input.val();
        el = input.closest('ul');
        // prevent double firing after interval passed
        if (isEven === true ){
            isEven = false;
        } else {
            isEven = true;
            return;
        }
        widget[func](dyn, el, lib_template, locale, val, "update");
    }, interval );
});

すべきことをしているようです。間違っている場合は、お気軽に修正してください。

于 2012-12-18T07:25:40.233 に答える
1

keyUpに加えて聞く理由はありchangeますか? 本当に重要なのは、これらのイベントの 1 つにすぎないのかもしれません。

そうでない場合は、提案したようにクロージャーを使用する必要があると思います。

于 2012-12-16T09:51:19.673 に答える
1

以前にこの問題に遭遇しましたが、作成時にオブジェクトにリクエストを保存し、以前に設定したオブジェクトをテストして、必要に応じて中止することになりました。ajax 呼び出しをトリガーする関数を編集する必要があります。例えば：

if ( ajaxRequest ) { 
  ajaxRequest.abort();
}
ajaxRequest = $.ajax({ ... }); // triggers ajax request and saves it

widget関数が ajax オブジェクトを返す場合、元の ajax リクエストを変更する代わりに、おそらくそれを変数に割り当てることができます。

于 2012-12-16T09:55:23.873 に答える