Javascript-当用户单击链接移动到另一个页面时，中止所有正在进行的http请求（图像/视频下载）

为了使问题更准确，这里是基本信息

我有一个有两个按钮的网站

• 中央的一个大按钮“预加载视频”，用户每次单击它，它会发出3个请求来下载3个AWS/cloudinary静态视频文件

• 另一个按钮“移动到下一页”，它将用户带到另一个具有类似布局（2个按钮）但与要预加载的不同视频相关联的页面

下面是基本流程

• 用户加载第1页，在中间有一个大的红色按钮

• 用户第一次点击“预加载视频”按钮，这将在javascript中触发预加载，即下载到video1、video2和video3

• 然后，用户再次单击“预加载视频”按钮，它会触发另外3个预加载/下载视频4、视频5和视频6的请求

• 等等

• 用户现在决定单击“下一页”按钮。此时，用户在第1页上对“预加载视频”的所有点击尚未“完全完成”，因为视频5和6仍在下载中（大视频：）

我想知道，当用户点击“下一页”按钮时，如何告诉浏览器中止视频5和6（由javascript触发）的下载，以便在手机等低速设备上，用户到达下一页并点击“预加载视频”（一些其他视频100101和102）没有从第1页下载视频5和6的剩余内容占用/消耗/减少他的带宽

我很确定视频5和6仍然占用带宽，因为请求没有被删除，这一点可以从第1页的某个console.log…在第2页加载后出现在控制台中得到证明：）另一个证据是，当我查看控制台时，即使在移动到第2页之后（从视觉上看，我现在在第2.html页的前面）我可以看到视频5和6在网络选项卡中显示为完全下载的文件

我尝试了preventdefault、abort（）或“throw error”，如下所示，但都没有成功

<a href="<%= deal_page_path(@next_deal) %>"
            title="move to next page"
            target="_blank"            
            rel="noreferrer"
            class="action-btn"
            onclick="abort();">Next page</a>

不确定解决这个问题是否重要，但这里有一个简单版本的调用，当用户单击“预加载视频按钮”时，可以预加载视频。在每次新的点击中，我都会在下面更改“i”，这样第一次预装视频时，它会从1到3，然后从4到6，依此类推

$preload-videos-button.on('click', function(e) {
  preloadVideos(i,i+2)
});

preloadVideos = function(start,end) {

  console.log("Video PRELOADING launched "+ start + ' to ' + end);

  for (var i = start; i <= end; i++) {
    (function () { 
      var currentObject = VideosObject[i];//a json with all the data i need to loop
      var stId          = currentObject.id;          
      var stFilename    = currentObject.asset_filename;

      var $jqueryCurrentShellVideo = $('#content').find( $('#videoAsset-'+ stId) );

      //send to video shell the first raw data-src which *automatically*
      //generates src for video via AWS/cloudinary responsive 
      $jqueryCurrentShellVideo.data('src', s);

      //fire off a request to aws/cloudinary server with the data-src to get
      //responsive-adjusted src AND download the video when it is returned
      $.cloudinary.responsive($jqueryCurrentShellVideo);          
      $jqueryCurrentShellVideo.on('load', function(e) {                   
        $(this).attr('data-response-status', 1);            
      });          
    })();
  }
}

$preload videos按钮。（'click'，函数（e）{
预加载视频（i，i+2）
});
预加载视频=功能（开始、结束）{
console.log（“启动视频预加载”+开始+”到“+结束”）；
对于（var i=start；i我认为这将起作用：

您可以重复发布的相同代码并替换这段代码

  $jqueryCurrentShellVideo.on('load', function(e) {                   
    $(this).attr('data-response-status', 1);            
  });

为此：

  $jqueryCurrentShellVideo.trigger('abort');

它正在从中触发
中止
事件


完整的示例将是：

$next-page-button.on('click', function(e) {
  abortLoading(i, i + 2)
});

abortLoading = function(start,end) {
  for (var i = start; i <= end; i++) {
    (function () {
      var currentObject = VideosObject[i];
      var stId          = currentObject.id;
      var stFilename    = currentObject.asset_filename;

      var $jqueryCurrentShellVideo = $('#content').find( $('#videoAsset-'+ stId) );
      $jqueryCurrentShellVideo.trigger('abort');
    })();
  }
}

$下一页按钮。在（'click'，函数（e）{
中止加载（i，i+2）
});
abortLoading=函数（开始、结束）{
对于（var i=start；i jquery：我听到点击按钮“预加载视频”，这会创建对第三方CDN（AWS）的请求。我有成功/错误事件。我也从这个策略中获得了灵感：呼叫是comlex，但我会尝试发布一些可以理解的内容：）谢谢，但当我点击“预加载视频”时，我不想也不能中止特定的视频加载。当我点击另一个按钮“移动到下一页”时，我想中止所有正在进行的http请求，这只是将用户移动到另一页。所以我需要使用一些相关的javascript，而不是您建议的图像预加载程序liek，而是使用a href“移动到下一页”按钮，在该按钮上，应用程序“不知道”“什么是jqueryCurrentShellVideo，我的意思是，我希望所有这些都被中止，难道我不能只针对所有正在进行的http请求吗？你需要创建另一个方法，比如说，
abortLoading
，当你点击
下一页
按钮时调用这个方法。好的，但是xxx中的xxx是什么。触发器（'abort'））？我如何告诉应用程序xxx=所有正在进行的尝试请求/下载？