以下是我发现的一些代码，我认为这是我答案的关键，但我还没有完全理解它。
/*
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);
}
}
?>
答案 0 :(得分：0)
我这样做的方式是我称之为滚动超时，基本上是每次按键都会重置的超时，所以这样的事情，这有点像psudo ish，但它应该给你一个想法
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毫秒内按下另一个键，我们将取消超时并设置一个新的超时。一旦用户停止输入的时间超过了超时，就会触发保存功能。
喝彩！
clearTimeout
https://www.w3schools.com/jsref/met_win_cleartimeout.asp
的setTimeout
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
我可能会做第一个，先做好。如果需要很长时间来进行保存，那么可以考虑中止请求。
感谢。
答案 1 :(得分：0)
这是带有一些额外内容的工作版本。
<script>
$(document).ready(function(){
$('#cfy1').change(function() {
var selectedOption = $('#cfy1 option:selected');
$('#show_finyear').html(selectedOption.val());
fetchChange();
});
$('#cmd2').change(function() {
var selectedOption = $('#cmd2 option:selected');
$('#show_commandName').html(selectedOption.val());
fetchChange();
});
$('#Stn3').change(function() {
var selectedOption = $('#Stn3 option:selected');
$('#show_stationName').html(selectedOption.val());
fetchChange();
});
$('#status4').change(function() {
var selectedOption = $('#status4 option:selected');
$('#show_statusList').html(selectedOption.val());
fetchChange();
});
$('#cfa5').change(function() {
var selectedOption = $('#cfa5 option:selected');
$('#show_cfaList').html(selectedOption.val());
fetchChange();
});
});
fetchChange();
function fetchChange() {
var finyear = $("#show_finyear").html();
var cmdname = $("#show_commandName").html();
var stnname = $("#show_stationName").html();
var statusname = $("#show_statusList").html();
var cfaname = $("#show_cfaList").html();
window.alert('yep');
$.ajax({
url:"get_value.php",
method:"POST",
data:{finyear:finyear,cmdname:cmdname,stnname:stnname,statusname:statusname,cfaname:cfaname},
success:function(data){
$('#recordsfromraky').html(data);
}
});
};
</script>