函数防抖和函数节流

函数防抖(debounce)

????什么是防抖?短时间内多次触发同一个事件,只执行最后一次,或者只在开始时执行,中间不执行。

  • 使用防抖之绿色基础版
//绿色基础版:
function debounce(doSomething,wait){
    var timeout;//需要一个外部变量,为增强封装,所以使用闭包
    return function(){
        var _this = this,
            _arguments = arguments;//arguments中存着e
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            doSomething.apply(_this,_arguments);
        },wait);
    }
}
//触发onmousemove事件
xcd.onmousemove = debounce(doSomething,1000);
  • 使用防抖之立即执行版
//立即执行版
function debounce(doSomething,wait,isImmediate){
    var timeout;
    return function(){
        var _this = this,
            _arguments = arguments;
        clearTimeout(timeout);
        if(isImmediate){
            var isTrigger = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            isTrigger&&doSomething.apply(_this,_arguments);
        }else{
            timeout = setTimeout(function(){
                doSomething.apply(_this,_arguments);
            },wait);
        }
    }
}
//触发onmousemove事件
xcd.onmousemove = debounce(doSomething,1000,true);

函数节流(throttle)

????什么是节流?节流是连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率,比如每间隔1秒钟,只会执行一次函数,无论这1秒钟内触发了多少次事件。

  • 使用节流之时间戳版
//绿色基础版之时间戳版
function throttle(doSomething,wait){
    var _this,
        _arguments,
        initTime = 0;
    return function(){
        var now = +new Date();//将new date()转化为时间戳
            _this = this;
            _arguments = arguments;
        if(now - initTime>wait){
            doSomething.apply(_this,_arguments);
            initTime = now;
        }
    }
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);
  • 使用节流之定时器版
//绿色基础版之定时器版
function throttle(doSomething,wait){
    var timeout;
    return function(){
        var _this = this;
            _arguments = arguments;
        if(!timeout){
            timeout = setTimeout(function(){
                timeout = null;
                doSomething.apply(_this,_arguments);
            },wait);
        };
    }
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);
  • 使用节流之双剑合璧版
//节流之双剑合璧版
function throttle(doSomething, wait) {
    var timeout, _this, _arguments,
        previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        doSomething.apply(_this, _arguments)
    };
    var throttled = function() {
        var now = +new Date();
        //下次触发 doSomething 剩余的时间
        var remaining = wait - (now - previous),
            _this = this;
            _arguments = arguments;
         // 如果没有剩余的时间了
        if (remaining <= 0) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            doSomething.apply(_this, _arguments);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);

原文地址:https://www.cnblogs.com/heroljy/p/9305155.html

时间: 2024-10-09 05:25:29

函数防抖和函数节流的相关文章

函数防抖VS函数节流

(1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: 触发了一个事件后:如果有一个定时任务待执行,就清除定时器,重新计时. 如果没有任务待执行,就定时执行这个事件. #应用场景: 表单的连续点击,防止重复提交.比如重复发送一篇文章. 类百度的搜索,连续输入等输入停止后再搜索. 一直拖动浏览器窗口,只想触发一次事件等. (2)函数节流throttle 规

微信小程序之使用函数防抖与函数节流

函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英文 debounce 有防反跳的意思,大致就是指防止重复触发. 那么,函数防抖,真正的含义是:延迟函数执行.即不管debounce函数触发了多久,只在最后一次触发debounce函数时,才定义setTimeout,到达间隔时间再执行 需要防抖的函数. 用处:多用于 input 框 输入时,显示匹配的

JS 函数防抖和函数节流

我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来讲解一些这两者的概念 函数节流:在频繁触发的情况下,需要执行的逻辑只有执行完之后,才能继续执行下一次 函数防抖:在频繁触发的情况下,只有足够的空闲时间,才执行代码一次,如果没有执行完就清除掉,重新执行逻辑 应用场景:高频触发以下方法 页面滚

函数防抖与函数节流

前言 有一些浏览器事件我们不希望它很频繁的触发,如调整窗口大小(onresize).监听滚动条滚动(onscroll),如果这些监听事件需要调用接口的话一秒内可能会调用上百次,这样坑定是有问题的. 函数防抖(debounce) 如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时). function debounce(fn,wait){ var timer = null; return fu

全选全不选,返回字符串长度,汉字计数为2,获取url中的参数 ,函数防抖,函数节流

/* 全选/全不选 */ function selectAll(objSelect) { if (objSelect.checked == true) { $("input[name='chkId']").attr("checked", true); $("input[name='chkAll']").attr("checked", true); } else if (objSelect.checked == false) {

函数防抖与节流[转载]

underscore.js提供了很多很有用的函数,两个函数都用于限制函数的执行. debounce 在解释这个函数前,我们先从一个例子看下这个函数的使用场景.假设我们网站有个搜索框,用户输入文本我们会自动联想匹配出一些结果供用户选择.我们可能首先想到的做法就是监听keypress事件,然后异步去查询结果.这个方法本身是没错的,但是如果用户快速的输入了一连串的字符,假设是10个字符,那么就会在瞬间触发了10次的请求,这无疑不是我们想要的.我们想要的是用户停止输入的时候才去触发查询的请求,这时候函数

JS函数节流和函数防抖问题分析

问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交,如何防止多次提交的发生? 为了应对如上场景,便出现了 函数防抖 和 函数节流 两个概念,总的来说:这两个方法是在时间轴上控制函数的执行次数. 1.函数防抖(debounce) 概念: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发

JavaScript函数节流和函数防抖的原理与区别

一.概念解释 ?函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.?大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的.反而形成一种视觉效果,就是一张图.就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样.?同理,可以类推到js代码.在一定时间内,代码执行的次数不一定要非常多.达到一定频率就足够了.因为跑得越多,带来的效果也是一样.倒不如,把js代码的执行次数控制在合理的范围.

JavaScript函数节流和函数防抖之间的区别

一.概念解释 ?函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.?大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的.反而形成一种视觉效果,就是一张图.就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样.?同理,可以类推到js代码.在一定时间内,代码执行的次数不一定要非常多.达到一定频率就足够了.因为跑得越多,带来的效果也是一样.倒不如,把js代码的执行次数控制在合理的范围.