您的位置:首页 > 教程 > JavaScript > uniapp项目使用防抖及节流的方案实战

uniapp项目使用防抖及节流的方案实战

2023-01-19 12:37:13 来源:易采站长站 作者:

目录此方案出现的理由实现方案及效果总结此方案出现的理由小程序中无法使用vue.directive的指令方法函数实现防抖节流传统的防抖节流方式相对繁琐实现方案及效果新建一个debounce-view组件...

目录
此方案出现的理由
实现方案及效果
总结

此方案出现的理由

小程序中无法使用vue.directive的指令方法函数实现防抖节流
传统的防抖节流方式相对繁琐

实现方案及效果

建一个debounce-view组件
直接用debounce-view包裹需要防抖的内容即可,如下:
<debounce-view @thtap="buyNow">
        <view class="buy-now">立即购买</view>
</debounce-view>

防抖组件内容:

//debounce-view
<template>
<view @click.stop="deTap">
<slot></slot>
</view>
</template>

<script>
function deBounce(fn, delay = 500, immediate) {
let timer = null,
immediateTimer = null;

return function() {
let args = arguments,
context = this;

// 第一次触发
if (immediate && !immediateTimer) {

fn.apply(context, args);
//重置首次触发标识,否则下个周期执行时会受干扰
immediateTimer = setTimeout(() => {
immediateTimer = null;
}, delay);
}
// 存在多次执行时,重置动作需放在timer中执行;
if (immediateTimer) clearTimeout(immediateTimer);
if (timer) clearTimeout(timer);

timer = setTimeout(() => {
fn.apply(context, args);
timer = null;
immediateTimer = null;
}, delay);
}
}
export default {
methods: {
deTap: deBounce(function() {
console.log('deTap')
this.$emit('deTap')
}, 500, true),
}
}
</script>

<style>
</style>

节流组件内容:

<template>
<view @click.stop="thTap">
<slot></slot>
</view>
</template>

<script>
// 第二版
function throttle(func, wait) {
var timeout;
var previous = 0;

return function() {
context = this;
args = arguments;
if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
func.apply(context, args)
}, wait)
}

}
}
export default {
methods: {
thTap: throttle(function() {
this.$emit('thTap')
}, 500)
}
}
</script>

<style>
</style>

总结

上述方法有有点但也有缺点,优点是使用起来非常的快捷方便,缺点是时间目前是写死的,各位看官如果有新的想法或者意见还请指教小弟一二

到此这篇关于uniapp项目使用防抖及节流的文章就介绍到这了,更多相关uniapp使用防抖及节流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25