Question

我有一个带有js函数refreshme（）的SELECT元素，它将调用change事件。

<select id="cat" name="cat" multiple  onchange="refreshme()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="result"></div>


<script>
function refreshme()
{
     /* i need output in $('#result').html(data) */
}
</script>

这里我想在更改选择/取消选择列表框项目时使用ajax调用URL“demo.php”。问题是，当用户选择项目时，它会立即调用ajax函数。我想设置一些内部，以便如果用户逐个选择列表框，那么ajax不会调用。我想设置大约2秒的差距。这意味着应该在最后一个选定项目的2秒后调用ajax调用。如果用户选择任何其他列表框，则ajax调用在运行并等待结果时将中止。

Answer 1

以下方法只会破坏不在服务器端的客户端请求。可能它会帮助你

<script>

function refreshme()
{
    if(ajaxcall)
     {

       ajaxcall.abort();  //abort the previous request 
     }

    var ajaxcall = $.ajax() ;  //ajax request start here assign to variable 

    //here you can also use array and destroy it using for loop    
}

</script>

Answer 2

我用ajax和计时器得到了答案。也许这可能对其他人有所帮助。

<select id="cat" name="cat" multiple  onchange="refreshme()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

<div id="result"></div>


<script>

var timer;
var x;

function refreshme()
{
    $('#result').html('');

    if (x) { x.abort() } // XHR  abort 
    clearTimeout(timer); // Clear the timer  
    timer = setTimeout(function() {  
        x = $.post('demo.php',function(data){
            $('#result').html(data);
            }); // run ajax request and store in x variable  
    }, 2000); // 2000ms delay 

}
</script>

需要使用abort和时间间隔

2 个答案: