美文网首页程序员
js防抖节流实现

js防抖节流实现

作者: 一人创客 | 来源:发表于2020-06-23 22:33 被阅读0次

防抖:就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间

 function debounce(fn, wait = 800) {
            let timmer = null;
            return function () {
                timmer && clearTimeout(timmer)
                timmer = setTimeout(() => {
                    fn()
                }, wait)

            }
        }

节流:就是指连续触发事件但是在一段事件中只执行一次函数

function debounce(fn, wait = 800) {
            let timmer = null;
            return function () {
                let now = !timmer
                timmer && clearTimeout(timmer)
                timmer = setTimeout(() => {
                    timmer = null
                }, wait)
                if (now) {
                    fn()
                }
            }
        }

相关文章

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • 防抖和节流

    一、防抖:只执行最后一次 js防抖方法 一、节流:控制执行次数 节流

  • 函数节流与函数防抖

    函数节流与函数防抖的区别JS魔法堂:函数节流(throttle)与函数去抖(debounce)函数的防抖与节流 自...

  • js防抖节流实现

    防抖:就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间 节流:就是指连...

  • 微信小程序防抖、节流的使用

    1、防抖、节流函数的封装 在utils文件夹下新建utils.js文件,然后写入节流和防抖函数 在.js页面引入并使用:

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • JS性能优化之——节流和防抖

    闭包 由于节流和防抖函数的实现都用到了闭包,所以在了解节流和防抖之前我先简单介绍下什么是闭包。 由于js代码在一个...

  • js函数防抖、节流实现

    React中使用防抖函数和节流函数 在React事件调用时,React传递给事件处理程序是一个合成事件对象的实例。...

  • js 实现防抖与节流

    鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改变事件onresize,瞬间的操作...

  • 前端性能优化:手写实现节流防抖

    前端性能优化:手写实现节流防抖 本文首发于 前端性能优化:手写实现节流防抖[https://gitee.com/r...

网友评论

    本文标题:js防抖节流实现

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