账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    请问浏览器对连续点击事件的节流时限是多少呢?
    42
    0

    现在需要实现的功能是文件多选,批量下载,下载利用了a标签的download属性,这里动态添加a标签,并手动触发a标签的click事件。。。如下:循环调用getDownloadURL函数时,每次都只能触发最后一个a标签的click事件,即只能下载最后一个文件。。。

    downloadFile() {
          if (this.multipleSelection.some(e => e.type === FILE_TYPE_DIR)) {
            this.$message.warning('暂不支持文件夹下载')
            return
          }
          let ids = this.multipleSelection.map(e => e.file_library_id)
          if (ids.length === 0) {
            this.$message.info('请选择要下载的文件')
            return
          }
          /* 这里循环调用getDownloadURL函数 */
          ids.forEach((id) => this.getDownloadURL(id))
          
          this.$refs.table.clearSelection()
        },
    
        async getDownloadURL(id) {
          let targetEl = document.createElement('a')
          targetEl.setAttribute('download', 'download')
          document.body.appendChild(targetEl)
    
          let { error_code, result } = await SDK.media.getDownloadURL(id)
          if (error_code) return
          targetEl.setAttribute('href', result)
          targetEl.click()
          document.body.removeChild(targetEl)
        },

    这里是因为浏览器对连续点击事件,有节流处理,所以这里调用getDownloadURL函数时加了延时处理,如下:

    downloadFile() {
          if (this.multipleSelection.some(e => e.type === FILE_TYPE_DIR)) {
            this.$message.warning('暂不支持文件夹下载')
            return
          }
          let ids = this.multipleSelection.map(e => e.file_library_id)
          if (ids.length === 0) {
            this.$message.info('请选择要下载的文件')
            return
          }
          /* 这里加了延时处理 */
          ids.forEach((id, i) =>
            setTimeout(() => {
              this.getDownloadURL(id)
            }, 500 * i)
          )
          
          this.$refs.table.clearSelection()
        },
    
        async getDownloadURL(id) {
          let targetEl = document.createElement('a')
          targetEl.setAttribute('download', 'download')
          document.body.appendChild(targetEl)
    
          let { error_code, result } = await SDK.media.getDownloadURL(id)
          if (error_code) return
          targetEl.setAttribute('href', result)
          targetEl.click()
          document.body.removeChild(targetEl)
        },

    加了setTimeout之后,连续点击事件都可以依次正确触发,但是setTimeout的时间小于500时,每次第二个点击事件都会失败,这里怀疑:浏览器对连续点击事件的节流处理时间大于500,所以这里设置延时小于500时,第二个点击事件都不会被触发。

    请问各位大佬,浏览器对连续点击事件的节流处理,具体的时限是多少,临界值具体是多少呢?可以推荐些学习资料吗?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 大罗阎王 普通会员 1楼

      浏览器对连续点击事件的节流时限取决于具体的浏览器和事件类型。一般来说,大部分现代浏览器都支持点击事件的连续事件处理机制,通常在10毫秒到1秒之间。

      然而,这只是一个基本的限制,实际的节流时限可能会因为浏览器的性能优化算法和事件处理的复杂性而有所不同。此外,如果事件的持续时间非常长,也可能导致浏览器的性能下降。

      如果你有具体的浏览器和事件类型需求,建议查阅相关的技术文档或者寻求专业人士的帮助。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部