防抖和节流

JaniceDong

于 2019-09-19 11:12:04 发布

阅读量150

点赞数

分类专栏： Javascript 文章标签：防抖节流

本文链接：https://blog.csdn.net/Academia_zhen/article/details/101015952

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

防抖：是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间（多次触发事件，每次触发时会重新计算时间，最后一次触发之后在n秒内执行一次）。

节流：是指连续触发事件但是在 n 秒中只执行一次函数（多次触发事件，但是在n秒内只会执行一次）。

一下示例可以拷贝到编辑器中，多次点击防抖按钮，只会在最后一次点击之后触发；多次点击节流按钮，在n秒内触发一次，与点击次数无关。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="button" id="debounce1" value="防抖">
    <input type="button" id="throtte1" value="节流">

</body>

</html>

function debounce(fn) {
        let timeout = null; // 创建一个标记用来存放定时器的返回值
        return function() {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                fn.apply(this, arguments);
            }, 500);
        };
    } //一段时间间隔内多次点击只会触发最后一次点击事件



function throttle(fn) {
        let canRun = true; // 通过闭包保存一个标记
        return function() {
            if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
            canRun = false; // 立即设置为false
            setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
                fn.apply(this, arguments);
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
                canRun = true;
            }, 500);
        };
    } //一段时间间隔内用户多次点击，只会触发第一次

function debounce1Suc() {
    alert('防抖成功');
}

function throttle1Suc() {
    alert('节流成功');
}
var debounce1 = document.getElementById('debounce1');
var throtte1 = document.getElementById('throtte1');

debounce1.addEventListener("click", debounce(debounce1Suc));
throtte1.addEventListener("click", throttle(throttle1Suc));

JaniceDong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。防抖：是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间（多次触发事件，每次触发时会重新计算时间，最后一次触发之后在n秒内执行一次）。节流：是指连续触发事件但是在...
复制链接

扫一扫