专栏首页前端小课堂实现一个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 条评论
登录 后参与评论

相关文章

  • Vue中拆分视图层代码的5点建议

    SPA框架几乎都是基于MVC或MVVM设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多。许多企业内部的项目...

    大史不说话
  • 后端小白的 Vue 入门笔记 —— 基础篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11303521.html

    IT技术小咖
  • 使用mpvue开发小程序教程

    网上一搜,解决的方法通常也是五花八门的,什么通过app上的globalData啊、通过存取storage啊、通过一个单独的模块(module)啊、通过Page路...

    极乐君
  • vue/cle3项目运行报错sockjs-node/info解决方案

      继上次将vue项目脚手架工具从vue-cli2.x升级到vue-cli3.x后,除了环境、配置问题外,在运行时出现了一些个新的问题。  启动项目后,在内网非...

    流眸
  • PWA入门:手把手教你制作一个PWA应用

    Web前端的同学是否想过学习app开发,以弥补自己移动端能力的不足?但在面对一众的选择时很多同学略感迷茫,是学习ios还是android开发?是学习原生开发、混...

    Fundebug
  • Vue归纳笔记:Vue 实例如何实现代理 data 对象属性的访问

    对于初学Vue.js的小伙伴而言,可能会认为Vue实例是一个很神奇的东西!因为它除了帮助我们完成双向绑定之外,还在某些细节方面为我们增加了一些理解上面的小烦恼!...

    用户1272076
  • 后端小白的 Vue 入门笔记 —— 进阶篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11325489.html

    IT技术小咖
  • 8 道高频出现的 Vue 面试题及答案

    MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

    夜尽天明
  • vscode+eslint让你编程快到飞起

    Ewall
  • 2019年要学习的前5个前端开发主题

    TypeScript是2018年最令人惊讶的增长故事之一.npm调查发现,有46%的npm用户使用TypeScript。它现在不仅是使用Angular的默认语言...

    技术小工

扫码关注云+社区

领取腾讯云代金券