単純な繰り返しでウェブサイトがクラッシュするAJAX/JQUERY

Question

私はプロジェクトとして簡単なツールを開発しています。私のウェブサイトのAJAX部分が何度も要求/使用されたときにウェブサイトがクラッシュするいくつかの問題があります。

私はたくさんのテキストフィールドを持っていますが、ユーザーが入力すると、入力フィールドの下にテストが自動的に入力されます。例えば、ユーザーが "test1"を最初のフィールドに入力し、 "test2"を2番目のフィールドに入力すると、 "test1 test2"をページを更新せずに動的に出力します。 PHPでこれを行う方法はわかっていますが、AJAXまたはJQUERYを使用してページが更新されないようにする必要があります。ここで

は私の入力フィールドのページです：これは私が作品を持っているもの、現在はかなりシンプルであるべき

echo $_POST['f_name'] . " " . $_POST['s_name']; 

：ここ

<form id="refme"> 

    <input type="text" id="url" placeholder="URL" autocomplete="off"><br> 
    <input type="text" id="f_name" placeholder="First Name" autocomplete="off"><br> 
    <input type="text" id="s_name" placeholder="Second Name" autocomplete="off"><br> 

    <br> 
    Reference 
    <hr> 

    <!-- FINISHED REFERENCE --> 

    <div id="sindex_result"> 

    </div> 

</form> 


<script> 

$(document).ready(function() { 
    $('#refme input[type=text]').keyup(function() { 

     var url = $('#url').val(); 
     var f_name = $('#f_name').val(); 
     var s_name = $('#s_name').val(); 

     if(url === '' && f_name == '' && s_name == ''){} 
     else 
     { 
      $('#sindex_result').html(''); 
      $.ajax({ 
       url:"http://bradleycousins.co.uk/fetch.php", 
       method:"post", 
       data:{url:url, f_name:f_name, s_name:s_name}, 
       dataType:"text", 
       success:function(data) 
       { 
        $('#sindex_result').html(data); 
       } 
      }); 
     } 




    }); 
}); 

</script> 

は 'fetch.php' ファイル、私のAJAXです。しかし、4回連続して使用すると、ウェブサイトがオフラインになり、「ページを開くことができませんでした/ Safariがオフラインになりました」これはすべてのブラウザで問題が発生しているので、コード内の問題である必要があります。

ありがとう任意の助けのために

==== EDIT

可能な解決策は、AJAX呼び出し要求を遅らせることがあるかもしれませんか？私はこれを実装しようとしたが、何も

<script> 

$(document).ready(function() { 

    var delay = (function() { 
    var timer = 0; 
    return function (callback, ms) { 
     clearTimeout(timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 


    $('#refme input[type=text]').keyup(function() { 

     delay(myKeyUpFunction, 250); 

     var url = $('#url').val(); 
     var f_name = $('#f_name').val(); 
     var s_name = $('#s_name').val(); 

     if(url === '' && f_name == '' && s_name == ''){} 
     else 
     { 
      $('#sindex_result').html(''); 
      $.ajax({ 
       url:"http://bradleycousins.co.uk/fetch.php", 
       method:"post", 
       data:{url:url, f_name:f_name, s_name:s_name}, 
       dataType:"text", 
       success:function(data) 
       { 
        $('#sindex_result').html(data); 
       } 
      }); 
     } 




    }); 
}); 

</script> 

Answer 1

ソリューションは、ユーザーがAjax呼び出しが250ミリ秒とした場合の入力が終了した後になるようにあなたが若干の遅延を追加している、全く今出力しません。

$('#refme input[type=text]').keyup(function() { 

    delay(function(){ 

     var url = $('#url').val(); 
    var f_name = $('#f_name').val(); 
    var s_name = $('#s_name').val(); 

    if(url === '' && f_name == '' && s_name == ''){} 
    else 
    { 
     $('#sindex_result').html(''); 
     $.ajax({ 
      url:"http://bradleycousins.co.uk/fetch.php", 
      method:"post", 
      data:{url:url, f_name:f_name, s_name:s_name}, 
      dataType:"text", 
      success:function(data) 
      { 
       $('#sindex_result').html(data); 
      } 
     }); 
    } 

    }, 250);