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)
  • 相关阅读:
    谷歌脸书第三方登录
    初步了解Owin
    select2去掉搜索框
    angularjs教程——自定义指令
    angularjs教程——Dom操作相关指令详解
    http://172.21.87.57:8081/seeyon/
    nce 1,a puma at large
    股池
    永清环保
    出门需要带的东西
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/10430606.html
Copyright © 2011-2022 走看看