这是我发现的一些代码，我认为它们是我答案的关键，但我还无法完全理解它。
/*
jQuery autoSave v1.0.0 - 2013-04-05
(c) 2013 Yang Zhao - geniuscarrier.com
license: http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.autoSave = function(callback, ms) {
return this.each(function() {
var timer = 0,
$this = $(this),
delay = ms || 1000;
$this.keyup(function() {
clearTimeout(timer);
var $context = $this.val();
if(localStorage) {
localStorage.setItem("autoSave", $context);
}
timer = setTimeout(function() {
callback();
}, delay);
});
});
};
})(jQuery);
下面是我迄今为止所研究的工作示例。我想修改此代码，以便无论用户是否更新，它都会在 KeyUp 上触发，而不是每隔几秒触发一次。
index.php
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Webslesson Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<h2 align="center">Auto Save Data using Ajax, Jquery, PHP and Mysql</h2>
<br>
<div class="form-group"> <label>Enter Post Title</label>
<input type="text" name="post_title" id="post_title" class="form-control"> </div>
<div class="form-group"> <label>Enter Post Description</label> <textarea name="post_description" id="post_description" rows="6" class="form-control"></textarea> </div>
<div class="form-group">
<button type="button" name="publish" class="btn btn-info">Publish</button>
</div>
<div class="form-group">
<input type="hidden" name="post_id" id="post_id">
<div id="autoSave"></div>
</div>
</div>
<script>
$(document).ready(function(){
function autoSave()
{
var post_title = $('#post_title').val();
var post_description = $('#post_description').val();
var post_id = $('#post_id').val();
if(post_title != '' && post_description != '')
{
$.ajax({
url:"save_post.php",
method:"POST",
data:{postTitle:post_title, postDescription:post_description, postId:post_id},
dataType:"text",
success:function(data)
{
if(data != '')
{
$('#post_id').val(data);
}
$('#autoSave').text("Post save as draft");
setTimeout(function(){
$('#autoSave').text('');
}, 5000);
}
});
}
}
setInterval(function(){
autoSave();
}, 10000);
});
</script>
</body>
</html>
save_post.php
<?php
$connect = mysqli_connect("mysqlserver", "database", "password", "databasename");
if(isset($_POST["postTitle"]) && isset($_POST["postDescription"]))
{
$post_title = mysqli_real_escape_string($connect, $_POST["postTitle"]);
$post_description = mysqli_real_escape_string($connect, $_POST["postDescription"]);
if($_POST["postId"] != '')
{
//update post
$sql = "UPDATE tbl_post SET post_title = '".$post_title."', post_description = '".$post_description."' WHERE post_id = '".$_POST["postId"]."'";
mysqli_query($connect, $sql);
}
else
{
//insert post
$sql = "INSERT INTO tbl_post(post_title, post_description, post_status) VALUES ('".$post_title."', '".$post_description."', 'draft')";
mysqli_query($connect, $sql);
echo mysqli_insert_id($connect);
}
}
?>
最佳答案
我这样做的方式是使用我所说的滚动超时，基本上是在每次按键时重置的超时，所以像这样，这有点伪，但它应该给你这个想法
var timeout;
$('body').on('keyup', '.field', function( event ){
if( timeout )
clearTimeout(timeout);
timeout = setTimout( function( event ){
autosave();
},400); //i find 400 milliseconds works good
});
function autosave(){
....
}
所以基本上发生的事情是在第一次按键时，我们设置了超时。然后，如果在 400 毫秒内按下另一个键，我们将取消超时并设置一个新的超时。一旦用户停止输入的时间超过超时时间，就会触发保存功能。
干杯!
清除超时
https://www.w3schools.com/jsref/met_win_cleartimeout.asp
设置超时
https://www.w3schools.com/jsref/met_win_settimeout.asp
为了改进这一点，您可以做的另一件事是存储并中止来自保存函数的先前 ajax (XMLHttpRequest) 请求(特别是如果需要一些时间来保存它)
所以在保存函数中
var timeout;
var saveRequest;
$('body').on('keyup', '.field', function( event ){
if( timeout )
clearTimeout(timeout);
if( saveRequest ){
saveRequest.abort();
saveRequest = false;
}
timeout = setTimout( function( event ){
autosave();
},400); //i find 400 milliseconds works good
});
function autoSave(){
....
saveRequest = $.post( url, {}, function( data ){
...
}
...
}
这遵循相同的想法，如果请求正在等待并且我们收到新请求的调用，那么旧请求并不重要，因为数据已更新。因此我们可以取消该请求并排队一个新请求。
XMLHttpRequest.abort()
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort
我可能会做第一个，首先。如果保存需要很长时间，那么可以考虑中止请求。
谢谢。
关于javascript - 仅在 JQuery、PHP、MySQL 上仅在最后一个 KeyUp 上自动保存。如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45402771/