专栏首页前端小课堂实现一个hoverDelay延迟hover

实现一个hoverDelay延迟hover

需求背景

经常在页面开发中,需要使用hover事件来触发相应的网络请求或页面DOM元素显示切换,需要考虑的问题就有了:

  • hover动作非常快,如果一hover就请求,会造成多余请求的浪费,造成后端接口不必要的压力
  • 如何判断这个用户hover是想做一定的操作,而不是鼠标误触
  • 构造这个hover延迟的时候,怎样封装才能通用使用

先来看一下效果演示:

<br> See the Pen <a href="https://codepen.io/AAA_TTT/pen/VorrpN/" target="_blank" rel="noopener">Vue.js | Mouseover &amp; Mouseleave</a> by AAA_TTT<br> (<a href="https://codepen.io/AAA_TTT" target="_blank" rel="noopener">@AAA_TTT</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br>

问题思考

基于上述的问题,思考是如下:

  • 当用户hover停留在某一DOM元素上一定时长时,比如500ms,才认为这个用户是实际想要做某种操作,这时候在实际的进行相应的网络请求或页面DOM元素显示切换
  • 如果在500ms之前就移开,就算是用户误触误滑,不做任何处理
  • 构造hover通用封装时,采用jQuery的插件开发的方式,形成通用的解决方案

代码封装

基于jQuery的插件系统,实现的hoverDelay插件方法;在每次事件之前,清空所有的计时器,重新设置延时定时器,则进行相应操作。

/**
 * @file: 鼠标滑动延迟执行的JQUERY扩展方法
 * @author: TiffanysBear
 *
 */
$.fn.hoverDelay = function (options) {
    var defaults = {
        hoverDuring: 200,
        outDuring: 200,
        hoverEvent: function () {
            $.noop();
        },
        outEvent: function () {
            $.noop();
        }
    };
    var sets = $.extend(defaults, options || {});
    var hoverTimer;
    var outTimer;
    return $(this).each(function () {
        $(this).hover(function () {
            clearTimeout(outTimer);
            hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
        }, function () {
            clearTimeout(hoverTimer);
            outTimer = setTimeout(sets.outEvent, sets.outDuring);
        });
    });
};

代码使用

因为该方法是放在jQuery的原型方法上,因此所有jQuery对象都有这个方法可以使用。

$(this).hoverDelay({
    hoverDuring: 500,
    outDuring: 300,
    hoverEvent: function () {
        
    },
    outEvent: function () {
        
    }
});

后续思考

类似与Vue这种类似于MVVM框架的项目应该如何做hoverDelay呢?原理也是一致的;但是在细节的处理上有些不同,通过Vue绑定的 mouseovermouseleave对定时器进行设置和清理也能实现需求。

html结构:

.<div id="mouse">
  <a
    v-on:mouseover="mouseover"
    v-on:mouseleave="mouseleave">
    {{message}}
  </a>
</div>

css样式:

body {
  
  background: #333;
  
  #mouse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 280px;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #007db9;

    a {
      display: block;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}

JS代码:

new Vue({
  el: '#mouse',
  data: {
    message: 'Hover Me!' ,
    timer: null,
    hoverEnterTime: 500,
    hoverLeaveTime: 300
  }, 
  methods: {
    mouseover: function(){
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.message = 'Good!'
      }, this.hoverEnterTime);
    },    
    mouseleave: function(){
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.message = 'Hover Me!!'
      }, this.hoverEnterTime);
    }
  }
})

代码效果和功能演示

<br> See the Pen <a href="https://codepen.io/AAA_TTT/pen/VorrpN/" target="_blank" rel="noopener">Vue.js | Mouseover &amp; Mouseleave</a> by AAA_TTT<br> (<a href="https://codepen.io/AAA_TTT" target="_blank" rel="noopener">@AAA_TTT</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AvalonJS+MVVM实战部分源码

    用户1112962
  • 从 0 实现一个延迟代理服务

    部门会定期进行容灾演习,也期望能够验证到各个服务的\"最差服务能力\"。即验证被调出现较高延迟或者过载的时候,主调的服务能力是否符合预期。要想做这种演习,其核心...

    小时光
  • 从0实现一个延迟代理服务

    需求背景: 后台业务逻辑类服务,其实现通常都会依赖其他外部服务,比如存储,或者其他的逻辑server。 有一类比较典型的问题: 假设主调方A是同步处理模型,有一...

    小时光
  • 怎么用 Redis 快速实现一个延迟队列?

    在后端服务中,经常有这样一种场景,写数据库操作在异步队列中执行,且这个异步队列是多进程运行的,这时如果对同一资源进行写库操作,很有可能产生数据被覆盖等问题,于是...

    用户1278550
  • 小程序开发实践:视图容器 view介绍,使用 view 搞定所有常见的 UI 布局

    view 是最基础的,也是微信小程序第一个公布的容器组件。所谓容器组件,就像 HTML 里的 div 标签一样,是为容纳其它组件而存在的。它本身也可以有一些自己...

    程序员LIYI
  • Structured Streaming实现超低延迟

    浪院长,最近忙死了,写文章的时间都没了。但是,都说时间就像海绵里的水,挤挤就有了。所以,今晚十点半开始整理这篇Structured streaming 相关的文...

    Spark学习技巧
  • SpringBoot+RabbitMQ 实现延迟队列

    rabbitmq 自身的一些概念,可以去网上或者书上获得。rabbitmq 延迟队列的实现原理,网上资料很多,简单盗图一张。

    水货程序员
  • 你真的知道怎么实现一个延迟队列吗 ?

    ? 作者:xiewang,腾讯 IEG 运营开发工程师 前言 延迟队列是我们日常开发过程中,经常接触并需要使用到的一种技术方案。前些时间在开发业务需求时,我也...

    腾讯技术工程官方号
  • 你真的知道怎么实现一个延迟队列吗 ?

    延迟队列是我们日常开发过程中,经常接触并需要使用到的一种技术方案。前些时间在开发业务需求时,我也遇到了一个需要使用到延迟消息队列的需求场景,因此我也在网上调研了...

    爱撒谎的男孩
  • 一日一技:在 Python 中实现延迟调用

    熟悉 Golang 的同学都知道,Golang 里面有一个关键词叫做defer,它可以实现延迟调用。

    青南
  • CSS transition delay简介与进阶应用

    我相信这是一个很常见的一个需求,有很多种方式能够实现,但是,其实现方式的原理各不相同,也有利有弊。

    黄Java
  • 低延迟仍是一个挑战

    本文来自streaming media的研讨会,主题是:低延迟仍然是一个挑战。主持人是流媒体视频联盟执行总监Jason Thibeault。

    用户1324186
  • 详解:小程序页面预加载优化,让你的小程序运行如飞

    如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术,可以缩短...

    极乐君
  • 【译】使用RxJava实现延迟订阅

    我越来越喜欢把RxJava的defer()操作符作为一个工具来使用,以确保Observable代码在被订阅后才执行(而不是创建后立即执行)。我之前写过一些有关d...

    小鄧子
  • 【译】使用RxJava实现延迟订阅

    我越来越喜欢把RxJava的defer()操作符作为一个工具来使用,以确保Observable代码在被订阅后才执行(而不是创建后立即执行)。我之前写过一些有关d...

    用户1740424
  • 【译】使用RxJava实现延迟订阅

    我越来越喜欢把RxJava的defer()操作符作为一个工具来使用,以确保Observable代码在被订阅后才执行(而不是创建后立即执行)。我之前写过一些有关d...

    用户1740424
  • mall整合RabbitMQ实现延迟消息

    1.安装Erlang,下载地址:http://erlang.org/download/otpwin6421.3.exe

    猿天地
  • mall整合RabbitMQ实现延迟消息

    1.安装Erlang,下载地址:http://erlang.org/download/otpwin6421.3.exe

    macrozheng
  • 低延迟直播的实现方法

    近些年直播行业可谓是越来越火,英雄联盟的赛事直播、罗老师的直播带货、电商平台的购物节这些动辄就是几千万的流量,都是大家可以在日常生活中接触到的。可是无论哪种类型...

    tenrail

扫码关注云+社区

领取腾讯云代金券