vue 防抖与节流用法

这篇具有很好参考价值的文章主要介绍了vue 防抖与节流用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、html

<template>
    <button @click="getData">获取数据</button>
</template>

二、JS

import { throttle } from "@/utils/common";
export default {
    methods:{
        getData: throttle(async function(params){
            console.log(”获取接口数据“,this,parmas)
        })
    }
}

三、公共方法 common.js文章来源地址https://www.toymoban.com/news/detail-695327.html

// 节流
export const throttle = function (cb, delay) {
  let timer = null;
  return function (...arg) {
    if (timer) return;
    cb.call(this, arg[0]);
    timer = setTimeout(() => {
      timer = null;
    }, delay);
  };
};
// 防抖
export const debounce = function (cb, delay) {
  let timer = null;
  return function (...arg) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      cb.call(this, arg[0]);
    }, delay);
  };
};

到了这里,关于vue 防抖与节流用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS—节流与防抖

    一、js防抖和节流 在进行窗口的resize、scroll、输出框内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验,就可以采用防抖(debounce)和节流(throttle)的方式来到达这种

    2023年04月08日
    浏览(39)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(49)
  • 前端优化 ----防抖 节流

    如果一个事件在短时间内连续触发,则只去执行最后一次。 控制频率 实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法 缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟 使一个函数在固定时间内只执行一次。控制

    2024年02月04日
    浏览(39)
  • 前端刷题-防抖节流

    在实际的开发过程中,一般会使用lodash自有的debounce函数和throttle函数对所要防抖/节流的函数进行包裹。例如

    2024年02月10日
    浏览(42)
  • 【前端】防抖和节流原理+实现

    防抖(Debounce)和节流(Throttle)都是用于控制函数执行频率的机制,它们在处理高频触发的事件时非常有用。 防抖的原理是在事件被触发后,等待一段时间(例如200毫秒)来执行函数,如果在等待时间内事件被再次触发,则重新计时。这样可以避免在短时间内多次触发事件

    2024年04月16日
    浏览(37)
  • Vue 3 中的极致防抖/节流(含常见方式防抖/节流)

    各位朋友你们好呀。今天是立春,明天就是正月十五元宵节了,这种立春 + 元宵相隔的时候,可是很难遇到的,百年中就只有几次。在这提前祝大家元宵快乐。 今天给大家带来的是 Vue 3 中的极致防抖/节流(含常见方式防抖/节流) 这篇文章,文章中不仅会讲述原来使用的防

    2024年02月01日
    浏览(44)
  • 节流防抖:提升前端性能的秘密武器(上)

    🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入

    2024年02月04日
    浏览(39)
  • 【js】防抖和节流的使用场景和区别:

    一、防抖 (多次触发 只执行最后一次) 作用: 高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间 防抖类似于英雄联盟回城6秒,如果回城中被打断,再次回城需要再等6秒 二、节流 (规定时间内 只触发一次) 作用:

    2024年02月10日
    浏览(37)
  • js实现防抖(debounce)与节流(throttle)

    一句话概括:防抖是给定一个时间周期,如果触发事件的周期小于该时间(也就是触发过快),则不会触发事件。 举个例子:我给定的时间周期是1s,如果我在触发第一次事件后1s内触发该事件,则重新开始计时,直到触发周期大于1s才会执行事件的方法。 一句话概括:节流

    2023年04月23日
    浏览(34)
  • 前端进阶版本 ,性能优化—-防抖、节流、重绘与回流

    目录 【防抖】 【节流】 重绘(repaint) 回流(reflow):又叫重排(layout) 工作中要如何避免大量使用重绘与回流? 常见的会导致回流的元素 【防抖】 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。 【节流】 指定时间间隔内只会执行一次任务。

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包