微信小程序防抖

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

微信小程序闭包-防抖

这里主要用到闭包,将函数内的值保存下来,下次点击的时候进入判断,如果定时器启动了,则清除定时器,直到最后一次启动定时器,也就是说,在规定的时间内只会触发最后一次定时器,从而达到防抖效果。

防抖的使用场景:

  • 防止连续快速点击
  • 防止滚动条触底时的频繁事件触发

方法一:

 data: {
    name : null 
  },
  time : null,

  // 滚动条触底
  scrollLower(){
    console.log('触底',this.time);
    clearTimeout(this.time) 
    this.time = setTimeout(()=>{
      console.log('防抖',this.time);  
    },1000)
  },

方法二:

  // 滚动条触底
  scrollLower(){
    this.light()  // 如果要携带参数在这
 
  },
  
  light : (function() {
      let i = null
     console.log('触底',i);
      return function() {   // 接收携带的参数在这
          if(i != null) clearTimeout(i)
          i = setTimeout(()=>{
              console.log('防抖',i);
          },1000)
      }
  })(),

微信小程序外层不支持const fn = function() 这种语法,所以这里只能以对象的形式定义函数:fn : function(){}文章来源地址https://www.toymoban.com/news/detail-573737.html


js闭包

    <button id="attick">点击</button>

    <script>
        let attick = document.getElementById('attick')
        attick.addEventListener('click',function(){
            light()
        })
          // 点击
          const light = (function() {
            let i = null
           console.log('点击',i);
            return function() {
                if(i != null) clearTimeout(i)   // 清除定时器
                i = setTimeout(()=>{
                    console.log('点击000',i);  // 1s内无操作才会触发且只触发最后一次
                },1000)
            }
        })()
    </script>

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

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

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

相关文章

  • 前端笔记--微信小程序(原生)

    介于工作需要,这里总结一下微信小程序的开发。 官网:微信小程序 开发文档:微信开放文档 vscode安装插件:   ‘ wxml 对应 html wxss 对应 css js 逻辑层 json 数据配置层 同样也是MVVM模型 (1)app.json pages :该项目的所有页面,字符串对应文件路径,但是不要加后缀名。 我们可

    2024年02月11日
    浏览(29)
  • 微信小程序 之 原生开发

    小程序的核心技术主要是三个: 页面布局:WXML ,类似HTML 页面样式:WXSS ,几乎就是CSS(某些不支持,某些进行了增强,但是基本是一致的) 页面脚本: JavaScript+WXS(WeixinScript) 网址 : 微信小程序 网址 : 微信开发者工具下载地址与更新日志 | 微信开放文档 Vue的MVVM和小程序MVV

    2023年04月08日
    浏览(40)
  • 原生小程序 微信小程序 使用ucharts

    背景:    原生小程序需要好看的折线图。 实现: 小程序开发版本 一般是uni-app项目使用ucharts在原生微信小程序也是可以使用。 方法: 源码下载: uCharts: 高性能跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小

    2024年02月09日
    浏览(31)
  • 微信小程序(原生)搜索功能实现

     一、效果图  二、代码 wxml scss js json文件是引入的vant

    2024年02月11日
    浏览(39)
  • 微信小程序原生写法传递参数

        data-xxx   自定义参数名  ,接收参数:方法(变量名)  如果需要传递多个,可以写多个data-[参数]的方式进行传递 多个参数写法 data-a ,data-b, 接收参数 :方法(变量名)    建议采用全小写命名,简短短拼~

    2024年02月09日
    浏览(36)
  • 实现原生微信小程序虚拟列表

    小程序的setData每一次调用,都会重新和旧的虚拟dom进行diff对比,如果页面列表比较大的话,不断频繁加载setData,实际上是非常消耗性能的,所以也是为了解决这个考虑,我虽然每一次都在使用setData加载数据,但是setData加载完成的数据,我并不是直接渲染,而是通过wxml中微

    2024年02月11日
    浏览(40)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(46)
  • 原生微信小程序实现手写签名功能

    项目中有遇到在小程序上实现手动签名功能,今天给大家分享下代码 wxml 文件代码如下,catchtouchmove属性一定要加上,否则移动起来连笔非常不流畅 wxss代码 js代码 效果如下

    2024年02月16日
    浏览(35)
  • 使用vscode开发原生微信小程序

    文章目录 前言 一、vscode需要下载哪些插件? 二、相关配置 总结 由于微信小程序开发工具的弊端,我们可以使用vscode来开发微信小程序,只需要做好一下的配置即可. 1.安装微信小程序开发助手 2.wechat-snippet 3.Easy-WXLESS 1.打开设置 在settings.json中添加以下代码 由于微信小程序开发

    2024年02月16日
    浏览(42)
  • 微信小程序(原生)封装弹框组件

    小程序封装原生弹框组件(一个弹框,点击确定关闭弹框,有需要的直接复制哦) 上面是组件的内容,下面是引用方法 首先第一步在app.json或者单文件json文件引入 我用的比较多就在app.json引入的 下面是文件使用方法: 只需要子啊data中控制这两个属性就可以了,喜欢的点个赞

    2024年02月11日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包