李志成的个人网站

李志成的个人网站

  • 博客
  • ·
  • 留言
  • ·
  • 友链
  • ·
  • 关于
  • ·
  • Rss

JS的防抖与节流

发表于2019-03-11 04:43:23分类于前端0条评论阅读次数20

概述

在进行浏览器的一些事件resize、mousemove、scroll、keyup等操作时,如果事件处理函数调用的频率无限制,而绑定在这些函数上的回调函数就会不停的被执行。这样会无形之中浪费浏览器的资源,使得用户体验下降。

此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,从而减少资源的浪费。

debounce(防抖)

简单定义:如果函数被持续性触发,但在一段时间内没有再触发事件,事件函数才会执行一次。

function debounce(fn, wait) {
    var wait = wait || 100;
    var _timeout = null;
    return function () {
        if (_timeout !== null) {
            clearTimeout(_timeout);
        }
        _timeout = setTimeout(fn, wait);
    }
}

// 处理函数
function handle() {
    console.log(Math.random());
}

// 滚动事件
window.addEventListener('mousemove', debounce(handle, 1000));

上面的debounce代码实现很简单,就是通过setTimeout来延迟执行函数,通过clearTimeout能够清空定时器。

当持续触发mousemove事件时,这个时候并没有立刻执行handle函数,而是当1000毫秒内没有触发mousemove事件时,才会延时触发mousemove事件。

throttle(节流)

简单定义:持续触发事件时,在一段时间内必然触发一次处理函数。

var throttle = function (fn, wait) {
    var wait = wait || 100;
    var start = Date.now();
    return function () {
        var self = this;
        var end = Date.now();
        if (end - start >= wait) {
            fn.apply(self);
            start = Date.now();
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

代码非常简单,理解起来并不是很难,其逻辑就是判断开始时间与结束时间是否大于间隔时间,然后调用函数执行。

总结

对于debounce和throttle两个方法,应该要知道在什么情况下去调用它们。

函数防抖:实际上是把n次执行合并为1次的操作。其原理就是利用计时器,在一定时间内的最后一个操作之后开始执行。所以比较适合用在keydown,click等场景的使用。

函数节流:一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。所以比较适合在ajax,scroll,resize等场景的使用。

--发表评论--

🚀support markdown (* ̄▽ ̄*)ブ