首页 > 其他分享 >页面关闭时调用后端接口

页面关闭时调用后端接口

时间:2023-07-23 21:44:06浏览次数:26  
标签:调用 接口 关闭 计时 updateStatistic 页面

产品有一个要求,统计用户浏览H5页面的时长。技术原理是在H5打开时调用接口获取统计id,在H5关闭时调用接口结束统计。

前端主要解决的问题就是在什么地方请求后端接口。

需要注意的就是PC端和移动端有所不同。

{
    data(){
        return {
            statisticId: null  
        }
    },
    onl oad() {
        // pc端关闭h5页面时更新计时
        window.addEventListener(
            "beforeunload",
            () => {
                this.updateStatistic()
            },
            false
        );
    },
    // pc端、移动端页面显示时开始计时
    onShow() {
        this.startStatistic()
    },
    // 移动端页面隐藏时更新计时
    onHide() {
        this.updateStatistic()
    },
    // 移动端页面关闭时更新计时
    onUnload() {
        this.updateStatistic()
    },
    methods: {
        // 发起请求,获取statisticId
        startStatistic() {
        },
        // 调用接口(传statisticId),更新计时
        updateStatistic() {
          this.$apis.xxx() // 调用接口
          // 加一段同步代码阻塞一下,否则刷新会发不出去请求
          let i = 0
          while(i++ < 1000) {}
        }
    }
}

标签:调用,接口,关闭,计时,updateStatistic,页面
From: https://www.cnblogs.com/hdxg/p/17575957.html

相关文章

  • 1.使用jquery两种方式实现设置页面中的div元素的宽度为200px,高度为200px,背景颜
    使用jQuery两种方式实现设置页面中的div元素的宽度为200px,高度为200px,背景颜色整体流程为了实现这个目标,我们需要按照以下步骤进行操作:引入jQuery库文件使用第一种方式实现设置div元素样式使用第二种方式实现设置div元素样式步骤详解1.引入jQuery库文件首先,我们需要在HT......
  • Java 调用gdal API(二)——栅格裁剪
    gdal可以说是GIS数据处理比较好的工具之一,虽然也提供了JavaAPI,但是官方文档确实太过简单,用起来确实太难受,每次都需要去参考对应的C++api,然后在对应使用。因此小编决定从这篇文章开始,将自己以前以及今后用到的API,都记录下,以帮助更多从事javaGIS服务开发者。今天主要来记录栅格......
  • android页面突然闪一下更新
    Android页面闪烁更新问题解析与解决方案1.简介在Android开发中,我们经常会遇到页面展示闪烁的情况,即页面在更新数据后会短暂地闪烁一下。这种现象通常是由于页面数据刷新的频率过高或者刷新机制不合理所引起的。本文将从原因分析、解决方案和代码示例三个方面来介绍如何解决An......
  • 登录页面 flutter
     https://luzhenyu.blog.csdn.net/article/details/124335584?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-124335584-blog-113384904.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distri......
  • jquery替换当前页面
    jQuery替换当前页面在Web开发中,有时候我们需要动态地替换当前页面的内容,而不需要重新加载整个页面。这可以通过使用jQuery来实现。jQuery是一个广泛应用于前端开发的JavaScript库,它简化了DOM操作、事件处理、动画效果等任务。为什么需要替换当前页面在Web应用中,有时候我们需要根......
  • APS与ERP及MES的关系和接口
    ERP是整个企业的信息管理系统,企业的经营、财务、生产、销售等都在ERP下运行。ERP在生产排程方面功能有限,不能满足企业详细排程的需求。APS作为独立的生产计划模块,成为ERP的补充。MES是生产现场数据采集监控系统,记录整个生产过程并实现产品的可追踪性。此三个系统组成企业信息化管......
  • python 调用halcon
    Python调用HalconHalcon是一种功能强大的机器视觉库,提供了丰富的图像处理和分析工具。在本文中,我们将介绍如何使用Python调用Halcon库,并展示一些常见的图像处理任务的示例代码。安装Halcon库在开始之前,我们需要先安装Halcon库。Halcon提供了Python的接口,可以通过pip命令进行安装......
  • python 调用 c api 怎么 传入 指针
    Python调用CAPI如何传入指针Python是一种高级编程语言,但有时需要使用底层的C语言来进行更高性能的操作。Python提供了CAPI,允许我们编写C代码并在Python程序中调用。在这种情况下,我们可能需要将指针传递给C函数,以便在C代码中进行操作。本文将介绍如何在Python中调用CAPI时传递指......
  • python std函数调用
    Python标准库函数调用Python是一种功能强大且易于学习的编程语言,它提供了丰富的标准库来支持各种不同的编程任务。这些标准库函数被广泛应用于开发Web应用、数据分析、人工智能等领域。本文将介绍一些常用的Python标准库函数调用,并提供相应的代码示例。1.时间日期处理Python的d......
  • python 使用django 快速搭建API接口
    Python使用Django快速搭建API接口介绍在Web开发中,API(ApplicationProgrammingInterface)接口是用于不同系统之间进行数据交换的重要手段。Django是一个功能强大的PythonWeb框架,可以快速搭建高效的API接口。本文将介绍如何使用Django快速搭建API接口,并提供代码示例。准备工作在......