Question

我的php表单中有一个文本框，用户可以在其中插入电影标题或演员/女演员名称，然后点击搜索按钮，将打开一个新窗口（movielist.php），显示包含的电影列表该演员/女演员的那个头衔或电影。

问题： 由于有时查询需要很长时间（例如，如果用户只键入“home”，要查看所有电影都包含此单词，或者如果他插入“tom”以查看所有演员的所有电影都在其名称中包含“tom”，则将花费几分钟），我想向用户显示一条消息，如果他/她想等待更多或者他更愿意更改搜索字词。

这是我到现在为止所做的：

<body>
<div id="message" div align="center"><img id="loading" src="http://schools.nyc.gov/ui/cms/sites/commoncore/images/loadingAnimation.gif" width="350" height="350">
<br />
Please wait while data is being loaded. 
</div>    
<div id= "field">
</div>
<?php
$pagenumber = '1';
    if(!empty($_GET['page'])) {
       $pagenumber = filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT);
        if(false === $pagenumber) {
          $pagenumber = '1';
        }
    }
?>    
 <script type="text/javascript">
(function(){
    setTimeout(showpopup, 10000)
 })();
function showpopup(){
      alert("It may take some time to browse data..Please change your search keywords if you don't want to wait longer");
     }

  $('#message').show();
  var searchType = parent.window.opener.searchType;
  var textbox = parent.window.opener.textbox; 
  var pagenumber = "<?php echo $pagenumber; ?>";

  $.ajax({
         url: 'searchfilm.php', //where I have DB Queries
         datatype: "json",
         data:{q:textbox, t:searchType, page:pagenumber},
         success: function(response) {       
                   $("#field").html(response);
                   $("#message").hide();
                   } 
        });        
</script>    
</body>

使用上面的代码，当用户在文本框中插入一个术语并单击搜索时，它会在页面中显示加载图像，并在10秒后打开弹出窗口。

问题：

它显示任何情况下的弹出窗口，即使查询速度很快且立即显示结果（电影列表），弹出窗口也会在10秒后打开。有人可以告诉我如何在显示结果时阻止打开弹出窗口？此外，是否可以弹出2个按钮：“是，继续”，“否，退出”？

下图可能会更好地显示我的问题：

enter image description here

Answer 1

您必须存储对setTimeout()的引用以加载警报...在您的成功方法中，清除超时，如以下SO问题中所述：

How to cancel/kill window.setTimeout before it happens on the client?

示例代码（未经测试）：

<script type="text/javascript">
var popupTimeout = setTimeout(showpopup, 10000);
function showpopup(){
      alert("It may take some time to browse data..Please change your search keywords if you don't want to wait longer");
     }

  $('#message').show();
  var searchType = parent.window.opener.searchType;
  var textbox = parent.window.opener.textbox; 
  var pagenumber = "<?php echo $pagenumber; ?>";

  $.ajax({
         url: 'searchfilm.php', //where I have DB Queries
         datatype: "json",
         data:{q:textbox, t:searchType, page:pagenumber},
         success: function(response) {       
                   $("#field").html(response);
                   clearTimeout(popupTimeout);
                   $("#message").hide();
                   } 
        });        
</script>

Answer 2

它显示弹出框，因为：

function(){
    setTimeout(showpopup, 10000)
})();

命令它这样做。

将其更改为：

var timeoutId;
function(){
    timeoutId = setTimeout(showpopup, 10000)
})();

$.ajax({
     url: 'searchfilm.php', //where I have DB Queries
     datatype: "json",
     data:{q:textbox, t:searchType, page:pagenumber},
     success: function(response) {
               clearTimeout(timeoutId);
               $("#field").html(response);
               $("#message").hide();
               } 
    });

在特定情况下显示和隐藏弹出窗口

2 个答案: