vue停止定时器_vue中使用防抖节流 ╰半夏微凉° 2023-01-12 10:25 170阅读 0赞 ![ca84b4dcae9bc00f6835b31bcc28e62a.png][] **防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算。** ### **一、函数防抖** ### **定义** 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。 **实现原理** 函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行。 **使用场景** 文本框输入搜索(连续输入时避免多次请求接口) 代码实现 /*** 函数防抖*/export function debounce(fn, delay) { // 记录上一次的延时器var timer = null;var delay = delay || 200;return function() { var args = arguments; var that = this; // 清除上一次延时器 clearTimeout(timer) timer = setTimeout(function() { fn.apply(that,args) }, delay); }} ### **二、函数节流** ### 定义 规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效;典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。 实现原理 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳, 使用场景 resize、scroll、mousemove等事件触发监听 代码实现 /*** 函数节流*/export function throttle(fn,delay){ var lastTime;var timer;var delay = delay || 200;return function() { var args = arguments; // 记录当前函数触发的时间 var nowTime = Date.now(); if (lastTime && nowTime - lastTime < delay) { clearTimeout(timer); timer = setTimeout(function () { // 记录上一次函数触发的时间 lastTime = nowTime; // 修正this指向问题 fn.apply(this, args); }, delay); }else{ lastTime = nowTime; fn.apply(this, args); } }} ### **三、在Vue中使用函数防抖实现输入框搜索** ### 效果图如下 ![60566c2cad57e90a7bf857cc66a9b4cc.png][] 新建common.js文件 /*** 函数防抖*/export function debounce(fn, delay) { // 记录上一次的延时器var timer = null;var delay = delay || 200;return function() { var args = arguments; var that = this; // 清除上一次延时器 clearTimeout(timer) timer = setTimeout(function() { fn.apply(that,args) }, delay); }} 在vue组件中引入 import {debounce} from '@/utils/common.js' 在组件中使用 `class="white-search-bar"><div class="search-bar-item"><span class="iconfont icon-search">span><input class="search-bar-input" :class="{'search-bar-focus':isSearchFocus}" type="text" maxlength="8" placeholder="应用搜索" v-model="keyword" @keyup="appSearch" @focus="onSearchFocus" @blur="onSearchBlur">div><span class="search-bar-btn" @click="appSearchCancel" v-if="isSearchFocus">取消span>div>methods:{ appSearch:debounce(function(){ this.getAppList() },300)}` `` `` `` [ca84b4dcae9bc00f6835b31bcc28e62a.png]: /images/20221119/5e049e9bfca748c4a69b27b1d5103ed3.png [60566c2cad57e90a7bf857cc66a9b4cc.png]: /images/20221119/6c54879745f34c92aabe5c2d2b607191.png
相关 定时器+时间戳实现防抖和节流 //防抖,使用定时器 function debounce(fn, delay) { let timer = nu た 入场券/ 2023年01月22日 14:55/ 0 赞/ 139 阅读
相关 防抖节流 故心故心故心故心小故冲啊 -------------------- 文章目录 防抖 节流 总结 -------------------- 防抖 r囧r小猫/ 2023年01月12日 11:36/ 0 赞/ 106 阅读
相关 vue停止定时器_vue中使用防抖节流 ![ca84b4dcae9bc00f6835b31bcc28e62a.png][] 防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算。 ╰半夏微凉°/ 2023年01月12日 10:25/ 0 赞/ 171 阅读
相关 vue js防抖节流 防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 防抖就是在函数需要频繁触发情况时,只有足够空闲的时间,才执行一次 节流 柔光的暖阳◎/ 2023年01月08日 08:04/ 0 赞/ 114 阅读
相关 防抖节流 防抖(debounce) 从滚动条监听的例子说起 先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们 叁歲伎倆/ 2022年11月14日 14:41/ 0 赞/ 172 阅读
相关 防抖、节流 防抖:只要用户触发事件,清除定时器,重新开始记时,避免全局污染,选择使用闭包实现效果。 节流:让用户在一段时间之内,只能执行一次。 判断当前的tag,tag是true允许执 ╰半橙微兮°/ 2022年09月14日 09:23/ 0 赞/ 165 阅读
相关 防抖和节流 1. 防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 \ 思路:每次触发事件时都取消之前的延时调用方法 function 朱雀/ 2022年03月18日 01:44/ 0 赞/ 258 阅读
相关 节流、防抖 节流和防抖主要处理事件处理函数高频调用,减少浏览器负担 节流:尽量减少触发次数,mint-ui上封装了一个方法 <script> var t 向右看齐/ 2022年01月30日 00:39/ 0 赞/ 284 阅读
相关 防抖节流 通过闭包返回的函数来进行操作,使得变量一直存在 防抖: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado 不念不忘少年蓝@/ 2021年07月24日 23:49/ 0 赞/ 408 阅读
相关 防抖节流 vue代码 防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){ 妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 427 阅读
还没有评论,来说两句吧...