使用AJAX定期保存

Question

我想编写一个代码，可以在输入一些字符或者经常输入一些字符后保存元素的内容。

我会调用ajax函数并将内容发送到脚本以保存在后台。只是不知道如何得到这个数字。如果我数到30，但如果它是连续输入，即每30个字符，看起来如何？

var count = 0; 

$(document).on("keyup", "#target", function(count) { 
    if (count > 30) { 
     $.ajax({ 
      ... 
     }); 
    } 
    count++; 
});  

Answer 1

用于模:)

var count = 0; 

$(document).on("keyup", "#target", function(count) { 
    if (count % 30 === 29) { 
     $.ajax({ 
      ... 
     }); 
    } 
    count++; 
}); 

Answer 2

只需在每次保存时将计数器设置为0。

var count = 0; 

$(document).on("keyup", "#target", function(count) { 
    if (count > 30) { 
     count = 0; 
     $.ajax({ 
      ... 
     }); 
    } 
    count++; 
}); 

Answer 3

经典案例试试这个：

$(document).on("keyup", "#target", function() { 
 
    var counter = $('#counter'); 
 
    if (parseInt(counter.val()) > 30) { 
 
     counter.val("0"); 
 
     console.log("Send Ajax"); 
 
    } 
 
    counter.val(function(i, val) { return +val+1 }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="target" placeholder="Target"> 
 
<input type="text" id="counter" value="0">

或者：

var counter = 0; 
 
$(document).on("keyup", "#target", function() { 
 
    if (counter > 30) { 
 
     counter = 0; 
 
     console.log("Send Ajax"); 
 
    } 
 
    counter++; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="target" placeholder="Target">

Answer 4

可以使用，可以通过数或时间间隔触发一个自定义事件

$(document).on("keyup", "#target", function(count) { 
 
    var $input = $(this), 
 
    count = ($input.data('count') || 0) + 1; 
 
    if (count >= 30) { 
 
    $input.trigger('server_update'); 
 
    count = 0; 
 
    } 
 
    $input.data('count', count); 
 
}).on('server_update', '#target', function() { 
 
    var $input = $(this); 
 
    // no need to update server if count is zero 
 
    if ($input.data('count')) { 
 
    $input.data('count', 0); 
 
    // do ajax 
 
    console.log(this.value) 
 
    } 
 
}); 
 

 

 
setInterval(function() { 
 
    $('#target').trigger('server_update'); 
 

 
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="target" value="test">