在不活动超时后发送请求

时间:2012-11-16 19:36:55

标签: php jquery ajax

我想编写一个行为类似谷歌翻译形式的代码。

当我在输入文本框中输入一个字母时,有一个等待新输入的0.5秒延迟。如果没有收到新的输入,请求将被发送到服务器,服务器将在输出文本框中返回结果。

我写了一些东西,但还不完整。你能帮帮我吗?!

$(document).ready(function(){
  $('#source').keyup(function(){
    var keyUpTime = $.now();
    setTimeout(function(){
      if($.now() - keyUpTime >= 500) {
        sendValue($('#source').val());
      }         
    },500);         
  });
});

function sendValue(str){
  $.post("ajax.php",{ sendValue: str }, function(data){
    $('#result_box').html(data.returnValue);
  }, "json");
};

2 个答案:

答案 0 :(得分:0)

存储您的超时,以便在发生新事件时可以覆盖它,但如果没有提供任何其他信息则将其发送。简单说明:

var ajaxTimeout = null;
$('#source').on('keyup', function(e){
  var val = $(this).val();
  if (ajaxTimeout){
    clearTimeout(ajaxTimeout);
  }
  ajaxTimeout = setTimeout(function(){
    sendValue(val);
  }, 0.5e3); // 0.5 seconds
});

答案 1 :(得分:0)

这就是我想要的:

var keyUpTime = 0;                  
    var t = 0;
    var executeAfterOneSecond = false;
    $('#source').keyup(function(){
        if(executeAfterOneSecond == false){
            executeAfterOneSecond = true;
            t = setTimeout(function(){
                executeAfterOneSecond = false;
                sendValue($('#source').val());                          
                }, 600);
            }                                   
        keyUpTime = $.now();
        setTimeout(function(){
            if($.now() - keyUpTime >= 200) {
                clearTimeout(t);
                executeAfterOneSecond = false;
                sendValue($('#source').val());          
                }           
            },200);
    });

如果字母间的间隔小于200毫秒,则不发送请求。如果超过600毫秒,并且尚未发送请求,则会自动转发请求。如果字母之间的间隔超过200毫秒,则发送请求。