只有在开发人员工具中设置了调试点时，Javascript/ajax 脚本才有效答案

【问题标题】：Javascript/ajax script works only if debugging point is set in developer tools只有在开发人员工具中设置了调试点时，Javascript/ajax 脚本才有效
【发布时间】：2018-08-09 14:54:05
【问题描述】：

我面临以下问题，似乎无法弄清楚。我们正在使用 Codeigniter 3 开发一个站点。为了将文件上传到我使用 Dropzone.js 的站点

我想实现以下目标：在上传期间，用户有机会取消上传过程。 addRemoveLinks: true

同时，我正在将文件参数（id、名称、大小等）保存到我的数据库中。当点击取消上传按钮时，上传停止，但此时视频参数已经存入数据库。在网站上，视频缩略图是根据数据库行加载的，所以在取消上传时，我想从数据库中删除关联的行。

问题是，我的代码只有在 Chrome 开发者工具中设置了一个调试点才有效，但代码的处理时间仍然很长。

没有调试点，db行不会被删除。

这是我的footer.php中的代码

<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- JS file -->
<script src="<?php echo asset_url(); ?>js/autocomplete/jquery.easy-autocomplete.min.js"></script> 

<!-- CSS file -->
<link rel="stylesheet" href="<?php echo asset_url(); ?>js/autocomplete/easy-autocomplete.css"> 

<!-- Tables -->
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>

<!-- Upload -->
<script src="<?php echo asset_url(); ?>js/dropzone.js"></script>

<script>
Dropzone.options.dropzonejsform = {
    maxFilesize: 20000,
    addRemoveLinks: true,
    dictCancelUpload: "<p style =\"font-size:115%; display:block\">Cancel upload<p>",
    dictRemoveFile: "",
    dictDefaultMessage: "<h3>Drag'n'drop files <br> or <button type='button' class='btn btn-outline-success' value='Upload'>click here</button> to upload</h3>",
    init: function() {

        this.on("removedfile", function(file) {
            var name = file.name;
            $.ajax({
                cache: false,
                url: './delete2/' + name,
                type: "GET",
                success: function(html) {
                    location.reload();
                }
            });

        });

        this.on("queuecomplete", function() {
            location.reload();
        });
    }
}

</script>

由于某种原因，如果没有 $ajax 处的调试点，代码不会从 db 中删除。有什么建议吗？

编辑： @Alex，这里是上传和删除功能

public function delete_video2($video_name){

    $this->db->where('video_name', $video_name);
    $this->db->delete('videos');        

}

// Add Video
public function add_video()
{

    $this->load->helper('url');

    //allowed file types
    $arr_file_types = ['video/mp4', 'video/avi', 'video/mov', 'video/3gp', 'video/mpeg'];

    // Target Path
    $target_dir = "./assets/upload/";
    // Assigining Random Name
    $File_Name          = $_FILES["file"]["name"];          // Get file name
    $File_Size          = $_FILES["file"]["size"];          // Get file name
    $File_Ext           = substr($File_Name, strrpos($File_Name, '.')); // Get file extention
    $Random_Number      = rand(0, 9999999999);                          // Random number to be added to name.
    $NewFileName        = $Random_Number.$File_Ext;                     // New file name

    // Uploading name to dataase

    move_uploaded_file($_FILES['file']['tmp_name'], $target_dir.$NewFileName);
    // echo "true";
    // die();

    $user = $this->ion_auth->user()->row();
    $id = $user->id;

    $data = array(
        'reference_id' => $File_Ext,
        'user_id' => $id,
        'video_name' => $File_Name,
        'video_url' => $NewFileName,
        'video_size' => $File_Size,
    );

    return $this->db->insert('videos', $data);

}

视图的相关部分

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-outline-upload" style="font-size:20px;" data-toggle="modal" data-target="#myModal">
  <i class="fa fa-plus-square"></i> Upload New Video
</button>

<!-- Upload Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog-index" style="max-width:350px">
    <div class="modal-content">

      <!--Dropzone upload form-->
      <?php $attributes = array('id' => 'dropzonejsform', 'class' => 'dropzone', 'enctype' => 'multipart/form-data' ); ?>
      <?php echo form_open("upload", $attributes);?>
      <?php echo form_close();?>

    </div>
  </div>
</div>

【问题讨论】：

在成功事件中调用你的数据库插入函数：dropzonejs.com/#event-success
同时显示删除功能和上传功能以及视图的相关区域（您只显示js）
我已经添加了。

标签： javascript php ajax codeigniter dropzone

【解决方案1】：

您的删除请求可能发生在其他处理（例如文件上传）以某种方式阻止它的点上，并且通过添加断点您将 ajax 调用延迟到此处理完成之后 -这就是为什么你只看到它工作的原因。

确保数据库已完成写入等，并且在发出删除请求之前处于删除条目的状态。

【讨论】：