zoukankan      html  css  js  c++  java
  • 防抖和节流方法实现

    防抖和节流记录

    防抖简介

    1. resize和scroll等事件操作的时候,会非常频繁的触发导致页面不断的重新渲染,非常影响性能,加重浏览器负担,导致用户体验不好,防抖函数就是当事件持续触发事件时,debounce函数会把事件合并且不会触发回调,当停止触发事件delay时长的时候才会触发事件。
     function debounce(fn, delay, immediate) {
        // fn是回调函数,delay是延迟时间,immediate是否先执行一次再节流
        var timer = null,
            _this, args
        return function() {
            //
            _this = this
            args = arguments
            // 如果有定时器先清除,让定时器的函数不执行
            timer && clearTimeout(timer)
            if (immediate) {
                // 没有定时器的话,告诉后面的函数可以先执行一次,首次进入函数没有定义定时器,do为true
                var do = !timer
                // 然后在delay时间以后将timer设置为null,首次执行之后,只有在timer为null之后才会再次执行
                timer = setTimeout(function() {
                    timer = null
                }, delay)
                if (do) {
                    fn.apply(_this, args)
                }
            } else {
                // 如果没设置第三个参数,就是什么时候停止,之后delay时间才执行
                timer = setTimeout(function() {
                    fn.apply(_this, args)
                }, delay)
            }
    
        }
    }
    

    节流简介

    1. 节流也是解决类似的问题,节流只允许回调函数在规定时间内只执行一次,和防抖的最大区别是,无论多频繁的触发事件,都会保证在规定时间内执行一次回调
     function throttle(fn, delay) {
        var before = Date.now()
        return function() {
            var _this = this,
                args = arguments
            var now = Date.now()
            if (now - before - delay >= 0) {
                before = now
                setTimeout(function() {
                    fn.apply(_this, args)
                }, delay)
            }
        }
    }
    
  • 相关阅读:
    UWP开发必备:常用数据列表控件汇总比较
    CodeForces 372 A. Counting Kangaroos is Fun
    ubuntu 13.10 eclipse 菜单栏不可用的问题
    Codeforces Round #219(Div. 2)373 B. Making Sequences is Fun(二分+找规律)
    Git/Github使用方法小记
    Ubuntu 下jdk的安装
    VIM简明教程
    codeforces 371 C-Hamburgers
    codeforces 371A K-Periodic Array
    计算机网络中IP地址和MAC地址
  • 原文地址:https://www.cnblogs.com/ytg-share/p/8794341.html
Copyright © 2011-2022 走看看