设置延迟
所以我有html表单通过AJAX将数据发送到PHP,如:设置延迟
的index.html
<script type="text/javascript">
$("#button").click(function(){
var ajaxname=$("#name").val();
$.ajax({
method:"POST",
url:"some.php",
data:"name="+ajaxname,
success:function(data){
$("#formresult").html(data);
}
});
}
</script>
<form>
<input type="text" name="name" id="name">
<input id="button" type="button" value="send"/>
</form>
<div id="formresult"></div>
和php文件,如:
some.php
<?php
$name = $_POST['name'];
if($name == "mahdi"){
echo 'true' . '<br/>';
echo 'welcome' . '<br/>';
echo 'have good time!' . '<br/>';
}
else{
echo 'false' . '<br/>';
echo 'wrong name' . '<br/>';
}
?>
当表单提交和AJAX回调成功时,一起显示所有回显。但我想回声“延迟时间”例如任何回声之间2秒。
我用 “睡眠(2);” 在PHP中, “的setTimeout” 和 “for循环” 在JavaScript中,但没有人不工作。
请有人知道答案在https://jsfiddle.net/看到它的工作。
这里很混乱。如果我理解正确,你希望每个回声在它们之间以2秒的延迟执行,导致每个回声的文本在页面上一个接一个地显示?
如果是这样,你不能使用一个PHP脚本和一组回声。您需要发回一串字符串,并让JavaScript使用setInterval一次显示一个字符串。
编辑例如:
PHP会是这样的:
<?php
header('Content-Type: application/json');
$name = $_POST['name'];
if($name == "mahdi"){
echo json_encode(array('true', 'welcome', 'have good time!'));
} else {
echo json_encode(array('false', 'wrong name'));
}
和JS一样:
$("#button").click(function(){
var ajaxname = $("#name").val();
$.ajax({
method: "POST",
url: "some.php",
dataType: "json",
data: "name=" + ajaxname,
success: function (data) {
var index = 0;
var intervalId = setInterval(function() {
$("#formresult").append('<p>' + data[index] + '</p>');
index = index + 1;
if (index === data.length) {
clearInterval(intervalId);
}
}, 2000);
}
});
}
这成功的Ajax响应后设置一个的setInterval。在所有消息被追加到#formresult后,间隔被清除。
当您使用Ajax时,请求发送到服务器并等待服务器执行作业并返回响应。您无法在分离的部分中获得结果。
你必须使用Socket来做这样的事情。
,使其在PHP耽误事:
<?php
sleep(1);
$name=$_POST['name'];
if($name == "mahdi"){
echo 'true' . '<br/>';
echo 'welcome' . '<br/>';
echo 'have good time!' . '<br/>';
}
else{
echo 'false' . '<br/>';
echo 'wrong name' . '<br/>';
}
?>
但对于JavaScript中使用:
<script type="text/javascript">
$("#button").click(function(){
var ajaxname=$("#name").val();
$.ajax({
method:"POST",
url:"some.php",
data:"name="+ajaxname,
success:function(data){setTimeout(function(data){
$("#formresult").html(data);
}});
},2000,data)};
</script>
<form>
<input type="text" name="name" id="name">
<input id="button" type="button" value="send"/>
</form>
<div id="formresult"></div>
请记住,通过使用两个片段,你会得到一个总的4秒的延迟。
不需要使用'sleep(1)',只需将'1000'加到'setTimeout') –
这就是第二个例子 –
不,它会延迟“n”秒并且不是一个一个地回显所有的语句,延迟 – mahdi
使用下面的代码
<?php
$name="mahdi";
if($name == "mahdi"){
echo 'true' . '<br/>';
sleep(2);
echo 'welcome' . '<br/>';
sleep(2);
echo 'have good time!' . '<br/>';
}
else{
echo 'false' . '<br/>';
echo 'wrong name' . '<br/>';
}
?>
了解一些网络基础知识,或者检查是否真的延迟输出。 –
请通过此。您可以使用setTimeout
。
https://jsfiddle.net/687qgqz0/?utm_source=website&utm_medium=embed&utm_campaign=687qgqz0
不!它会延迟“n”秒,并且将所有的语句全部一起回显,而不是一个接一个地推迟 – mahdi
您可以从php
返回一个数组,迭代返回数组$.each()
,使用.delay()
,.queue()
,在success
给每个呼叫之间的延迟两秒.append()
<form>
<input type="text" name="name" id="name">
<input id="button" type="button" value="send" />
</form>
<div id="formresult"></div>
<script type="text/javascript">
var arr = ["true<br/>"
, "welcome<br/>"
, "have good time!<br>"
, "false<br/>"
, "wrong name<br>"];
$("#button").click(function() {
var ajaxname = $("#name").val();
$.ajax({
method: "POST",
url: "/echo/json/",
data: {
json: JSON.stringify(arr)
},
dataType: "json",
success: function(data) {
$.each(data, function(index, html) {
$("#formresult").delay(2000)
.queue(function(next) {
$("#formresult").append(html);
next()
})
})
}
});
})
</script>
的jsfiddle https://jsfiddle.net/berhth9r/
拜托,更多为我解释。我是否应该更改该PHP代码? – mahdi
@mahdi在'php'使用'echo encode_json($ arr)' – guest271314
,但我认为你正在通过“AJAX”发送带有“json”类型的“arr”数据。那么你在哪里使用输入名称的值并发送它? – mahdi
更改您的Ajax响应转换为JSON等结构化格式。然后使用setTimeout通过延迟输出每个响应部分。 – hindmost
@Tasos它只能用于显示一些句子,而不连接到php文件,并执行过程 – mahdi