美文网首页
vue以及mpvue的节流方案

vue以及mpvue的节流方案

作者: 杜伟杰525 | 来源:发表于2019-11-22 15:45 被阅读0次

最近公司项目在做微信小程序我是用mpvue开发的微信小程序,因为时间太紧急,所以关于节流方面的没有过多考虑,所以最近写了一个关于节流的demo,废话不多说,上代码

节流大家应该都知道,前端面试基本上都有可能被问到这个,网上的方案也是满天飞,所以这块的话,我们前端处理一下,后端在来一下,基本上没问题了,


代码如下(由于我写的是原生的JavaScript,其实稍加改动以后就能在你的Vue项目上用上了)

html部分


<button id="touch"> 你点啊 </button>


js部分

这里有两个点击事件的对比

运行效果的话,上传截图看不出来什么区别,有心的话就直接copy代码在编译器上运行试试吧

这里的话其实我翻了一个错误,大家注意注意这里的千万不能用箭头函数,这样会导致获取不到this的值
还有就是下面的代码部分需要加上,this的指向以及arguments,方便传参


var touch = document.getElementById('touch'); // 获取重置按钮
         let throttle = (fn, gapTime) =>{
            if (gapTime == null || gapTime == undefined) {
                gapTime = 1500
            }

            let _lastTime = null
            return function() {
                let _nowTime = +new Date()
                if (_nowTime - _lastTime > gapTime || !_lastTime) {
                                       fn.apply(this,arguments)
                    //  fn()   注意这里不能直接fn()
                    _lastTime = _nowTime
                }
            }
        }

touch.addEventListener('click', throttle(()=>{

console.log(11111)

}, 1000));

// touch.addEventListener('click', () => {

// console.log(11111)

// })

为了方便大家 我直接把Vue项目中的代码贴上来,方便大家知道在项目中如何使用
1、js文件中封装



2、页面引入



3.使用

相关文章

  • vue以及mpvue的节流方案

    最近公司项目在做微信小程序我是用mpvue开发的微信小程序,因为时间太紧急,所以关于节流方面的没有过多考虑,所以最...

  • 使用mpvue框架开发微信小程序

    mpvue官网:http://mpvue.com/mpvue/ 通过 Vue.js 命令行工具 vue-cli,你...

  • mpvue搭建小程序框架

    http://mpvue.com/mpvue/ 美团开源了mpvue 由于mpvue框架是完全基于Vue框架的(重...

  • 使用mpvue开发小程序(一)

    介绍 mpvue是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心,mpvue修改了Vue.js...

  • mpvue系列(一)

    一、什么是mpvue? mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,...

  • mpvue搭建微信小程序

    mpvue 介绍 mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvu...

  • 使用mpvue开发微信小程序(三)

    mpvue 介绍 mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpv...

  • 使用mpvue开发微信小程序

    mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vu...

  • 快速初始化一个mpvue 项目

    mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vu...

  • mpvue

    问:mpvue里,哪些是要用微信小程序原生写法?(也就是mpvue和vue的区别) 答:vue里跳转页面,用

网友评论

      本文标题:vue以及mpvue的节流方案

      本文链接:https://www.haomeiwen.com/subject/stlqwctx.html