zoukankan      html  css  js  c++  java
  • JS 防抖函数和节流函数

    文章转载自:木上有水

    什么是防抖?什么是节流?

      工作中我们经常会用一些方法监听某些事件的完成,比如scroll、resize、keyup等。

      常规事件触发的时候,比如scroll,会在短时间内触发多次事件绑定,造成性能的浪费!

    1、防抖

      什么是防抖:多次事件触发后、事件处理函数只执行一次,并且是在触发操作结束时执行。

      原理:延时操作处理函数、若设定的延时到来之前、再次触发函数、则清除上一次的延时操作定时器、重新定时。(有点绕,试验一下就懂了)

      代码(例:scroll):

    let timer;
    window.onscrool = function(){
        if(timer){
            clearTimeout(timer);
        }
       console.log('方法在一直执行'); timer
    = setTimeout(function(){ //滚动条位置   let scrollTop = document.body.scrollTop||document.documentElement.scrollTop;   timer = undefined;
         console.log('滚动条位置:' + scrollTop);
      },500);
    }

       封装:

    /**
     * 防抖函数
     * @param method 事件触发的操作
     * @param delay 多少毫秒内连续触发事件,不会执行
     * @returns {Function}
     */
    function debounce(method,delay) {
        let timer = null;
        return function () {
            let self = this,
                args = arguments;
            timer && clearTimeout(timer);
            timer = setTimeout(function () {
                method.apply(self,args);
            },delay);
        }
    }
    
    window.onscroll = debounce(function () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置:' + scrollTop);
    },200)

    2、节流

      什么是节流:触发函数事件后,短时间内无法连续调用,只有执行完上一次的函数后,过了规定时间才可以调用下一次。

      原理:对处理函数进行延迟操作、若设定时间到来之前,再次出发事件、则清除上一次的延时操作定时器,重新定时。

      代码(例:scroll):

      

    let startTime = Date.now(); //开始时间
    let time = 500; //间隔时间
    let timer;
    window.onscroll = function throttle(){
    let currentTime = Date.now();
    if(currentTime - startTime >= time){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置:' + scrollTop);
    startTime = currentTime;
    }else{
    clearTimeout(timer);
    timer = setTimeout(function () {
    throttle()
    }, 50);
    }
    }

      封装:

    /**
     * 节流函数
     * @param method 事件触发的操作
     * @param mustRunDelay 间隔多少毫秒需要触发一次事件
     */
    function throttle(method, mustRunDelay) {
        let timer,
            args = arguments,
            start;
        return function loop() {
            let self = this;
            let now = Date.now();
            if(!start){
                start = now;
            }
            if(timer){
                clearTimeout(timer);
            }
            if(now - start >= mustRunDelay){
                method.apply(self, args);
                start = now;
            }else {
                timer = setTimeout(function () {
                    loop.apply(self, args);
                }, 50);
            }
        }
    }
    window.onscroll = throttle(function () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置:' + scrollTop);
    },800)
  • 相关阅读:
    文本比较算法Ⅴ——回顾贴,对前面几篇文章的回顾与质疑
    键盘监控的实现Ⅱ——容易产生误解的CallNextHookEx函数
    利用WPF建立自适应窗口大小布局的WinForm窗口
    计算机中的颜色XIII——颜色转换的快速计算公式
    键盘监控的实现Ⅲ——按键消息的修改(映射)
    计算机中的颜色XI——从色相值到纯色的快速计算(新的公式)
    Dot Net中InputLanguage对象的使用限制
    计算机中的颜色XII——快速计算纯色的色相值(新的公式)
    关于房产中介网的设计随想
    java笔记:熟练掌握线程技术基础篇之解决资源共享的问题(中)前篇
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/10430606.html
Copyright © 2011-2022 走看看