前端技术文档和网站数据接口使用指南详情
网站开发中有关html、css、js等前端技术文档和易助科技网网站数据接口使用文档及相关资料下载!

自定义鼠标经过事件的延时处理方法hoverDelay

来源:易助科技浏览量:19收藏

使用场景


1. hover动作非常快,如果一hover就请求,会造成多余请求的浪费,造成后端接口不必要的压力;

2. 如何判断这个用户hover是想做一定的操作,而不是鼠标误触


封装自定义hoverDelay方法


$.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);
    });
  });
};


使用


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