ylinwind.

JavaScript 函数节流和防抖

JavaScript
字数统计: 150阅读时长: 1 min
2019/03/07 Share

函数节流

控制函数在一定时间范围内只会执行一次，避免多次执行或者不执行；

直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var throttle_timer = null;
var throttle_flag = false;
var timer_delay = 300;

function func_throttle(){//函数节流
    if(throttle_flag){
        return;
    }
    throttle_flag = true;
    throttle_timer = setTimeout(() => {
        console.log('执行节流函数');
        throttle_flag = false;
    }, timer_delay);
}

函数防抖

控制函数在多次频繁调用的情况时只会执行最后一次的情况叫做防抖；

防抖代码：

1
2
3
4
5
6
7
8
9
var debounce_timer = null;
var timer_delay = 300;

function func_debounce(){//函数防抖
    clearTimeout(debounce_timer);
    debounce_timer = setTimeout(() => {
        console.log('执行防抖函数');
    }, timer_delay);
}

原文作者：ylinwind

原文链接：https://ylinwind.github.io/2019/03/07/ylin-20190307-03/

发表日期：March 7th 2019, 8:30:13 pm

更新日期：March 7th 2019, 8:34:54 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 函数节流
  2. 2. 函数防抖
Total : 27
2020
2019
markdown 像素值 毫米值 英寸值 Git CSS HTML 面试题 JavaScript 浏览器缓存 JAVASCRIPT VIDEO 工作记录 学习记录 D3.js 图表 英语美文 React React-Native 微信小程序
转载 CSS JavaScript CSS/HTML JAVASCRIPT 工作记录 CSS/HTML/面试 JAVASCRIPT/工作问题 兴趣英语 工作记录/ffmpeg 工作记录/ffmpeg/pupptter