zoukankan      html  css  js  c++  java
  • 防抖与节流

    函数防抖:触发高频时间后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

    函数节流:高频事件触发,一定时间内只能执行一次。(大白话:当高频事件触发时,第一次会立即执行,而后再怎么频繁地触发事件,只有等待上一次时间执行完了,才会再次触发。)

    作用:函数防抖和函数节流都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

    1、防抖案例

    //防抖案例:每次触发事件时都取消之前的延时调用方法
    function debounce() {
        let timeout = null; // 创建一个标记用来存放定时器的返回值
        return function() {
            clearTimeout(timeout); // 每次触发事件都将上一次的延时器清除
            timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout
                console.log('防抖')
            }, 1000);
        };
    }
    but.addEventListener('click', debounce());

    2、节流案例

    //节流案例:每次触发事件都判断之前的延时器是否执行完毕
    function throttle(){
        var timer = null;//设定初始值为null
        return function(){
            if(!timer){//判断延时器是否执行完毕
                timer = setTimeout(() => {
                    console.log('节流')
                    timer = null;//执行完毕再设为null
                },1000)
            }
        }
    }
    but.addEventListener("click",throttle());

    总结:

    函数防抖:不管操作多少次,只在最后一次事件才触发函数。

    函数节流:只有上一次触发的事件函数执行完毕,才能执行下一次的触发的事件函数。

  • 相关阅读:
    测试的种类
    软件测试的原则
    软件测试的目的
    软件测试的对象
    软件的分类
    软件测试
    mysql 视图
    mysql 字段添加以及删除
    mysql 引擎类型
    mysql 数据插入insert
  • 原文地址:https://www.cnblogs.com/MaShuai666/p/13183457.html
Copyright © 2011-2022 走看看