JavaScript防抖函数执行多个事件处理函数,监听浏览器窗口拖拽事件(Vue防抖函数执行多个事件处理函数)

61 篇文章 1 订阅
37 篇文章 1 订阅

简介:当用户调整浏览器窗口大小时,浏览器会触发 resize 事件。通常,我们希望在窗口大小改变时执行一些操作,但是如果用户频繁调整窗口大小,可能会导致这些操作被频繁触发,影响页面性能和用户体验。这时候,防抖函数就派上了用场。这里来记录一下

防抖函数:就是某一高频事件不断被触发时,仅在最后一次真正执行事件处理代码,将多次执行变为最后一次执行;

这里我们使用防抖函数来监听浏览器窗口拖拽事件:

//定义防抖函数
debounce(func, wait) {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        const later = function () {
          timeout = null;
          func.apply(context, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
},

然后直接调用:

//mounted() {

    window.addEventListener(
      "resize",
      this.debounce(() => {
        this.initCanvas();
        this.getImage();
      }, 5000)
    ); // 5000 毫秒即 5 秒

//},

可以看到,给window窗口添加了 resize 监听事件,5秒执行一次。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue中实现目标图片的效果,可以使用以下步骤: 1. 在Vue组件中,使用`ref`属性获取要的图片元素,例如: ```html <template> <div> <img ref="dragImg" src="..." @mousedown="startDrag"> </div> </template> ``` 2. 在Vue组件的methods中定义`startDrag`方法,当鼠标按下时开始,例如: ```javascript methods: { startDrag(event) { // 获取要的图片元素 const dragImg = this.$refs.dragImg; // 记录鼠标按下时的坐标 const startX = event.clientX; const startY = event.clientY; // 记录图片元素当前的偏移量 const offsetX = dragImg.offsetLeft; const offsetY = dragImg.offsetTop; // 给document添加mousemove和mouseup事件监听器,开始 document.addEventListener("mousemove", moveHandler); document.addEventListener("mouseup", upHandler); // 阻止默认的mousedown事件 event.preventDefault(); // 移动事件处理函数 const moveHandler = (event) => { // 计算鼠标移动的偏移量 const deltaX = event.clientX - startX; const deltaY = event.clientY - startY; // 设置图片元素的新位置 dragImg.style.left = offsetX + deltaX + "px"; dragImg.style.top = offsetY + deltaY + "px"; }; // 松开事件处理函数 const upHandler = (event) => { // 移除事件监听器 document.removeEventListener("mousemove", moveHandler); document.removeEventListener("mouseup", upHandler); }; } } ``` 以上代码会在鼠标按下时记录鼠标位置和图片的偏移量,并且给document添加mousemove和mouseup事件监听器,当鼠标移动时设置图片的新位置,当鼠标松开时移除事件监听器。请注意,以上代码只实现了图片的基本功能,你可能还需要处理一些边界和交互细节。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北城笑笑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值