js的节流和防抖

1,节流

  节流就是对连续的函数触发,在设定的间隔时间段内,只让其执行一次。

  先来看看js高级程序设计3里面节流的代码

function throttle (method, context, wait) {
    clearTimeout(method.tId)
     method.tId = setTimeout(function () {
         method.call(context)
     }, wait)
}

当函数连续执行的时候,如果之前的定时器还没执行,就把它清除了,再从新设置一个新的定时器。

  我们可以对这个进行改进

function throttle (fn, wait) {   let timeout;    let prevTime = 0;   return (...args) => {    //返回一个函数       let now = new Date;       let remaining = wait - (now - prevTime)     // 下一次执行的时间,       if (remaining <=0 || remaining > wait) {    // 如果下一次的时间小于等于0,立刻执行一次函数,并把时间戳改为当前的时间。           clearTimeout(timeout)           timeout = null           prevTime = now           fn(args)       } else if (!timeout) {          // 如果当前没有定时器 那么就新加一个定时器。           timeout = setTimeout(() => {               timeout = null;               prevTime = new Date;               fn(args)           }, remaining)       }   }}

  第一次执行: timeout为undefined, prevTime为0     remaining为负数,走if的第一个,立即执行了函数并将下次时间改成当前时间

  第二次执行: 下一次时间为正,定时器还是为undefined,走if的第二个,设置定时器

     下一次执行(不超过wait时间内) :  remaining大于0,定时器为true,所以直接跳出

  

    understore里面的节流考虑了两个高级的配置:  是否在第一次触发的时候就执行函数 和  最后一次的定时器触发的执行函数。还提供了节流的取消函数。

function throttle(fn, wait, option = {}) {
        let timeout;
        let prevTime = 0
        let throttled = (...args) => {
            let now = new Date;
            if (!prevTime && option.leading === false) prevTime = now;
            let remaining = wait - (now - prevTime);
            if (remaining <= 0 || remaining > wait) {
                if (timeout) {
                    clearTimeout(timeout)
                    timeout = null;
                }
                prevTime = now
                fn(args)
            } else if (!timeout && option.trailing !== false) {
                timeout = setTimeout(() => {
                    prevTime = option.leading === false ? 0 : new Date;
                    fn(args)
                })
            }
        }
        throttled.cancel = () => {
            clearTimeout(timeout);
            prevTime = 0;
            timeout = null;
        }
        return throttled
}

  除了加了两个配置项和取消函数,别的基本都是一样的。

  需要注意的是,首次不执行和最后不执行这两个不能同时配置,只能配置一个。

2,防抖

  其实我感觉防抖和节流差别不大,主要的差别在于: 在wait的时间内,反复触发函数的话,节流不会理会这些,而防抖的话,只要你触发了,他就会清除之前的定时器,从新设置一个定时器。

  比如说坐电梯,如果是节流的话,电梯等待时间为5S,从第一个人进电梯开始算,到5S后他就会关门运行。

           如果是防抖的话,电梯等待时间为5S,在这5S之内,如果有人进电梯,他就会重新计时,只有在5S中没有人进电梯了,电梯才关门运行。

function debounce (fn, wait) {   let timeout;   return (...args) => {       if (timeout) clearTimeout(timeout);       timeout = setTimeout(() => {           fn(args)       }, wait)   }}

  返回一个函数, 先清除之前的定时器,然后再新加定时器。

  underscore里面的防抖添加了一个高级配置,是否立即执行一次函数。

function debounce(fn, wait, immediate) {
       let timeout;
       return (...args) => {
           let callNow = immediate && !timeout;
           if (timeout) clearTimeout(timeout);
           timeout = setTimeout(() => {
               timeout = null;
               if (!immediate) fn(args)
           }, wait)
           if (callNow) fn(args)
       }
}

  这里添加了immediate这个配置项,如果为true的话,那么触发第一次的时候就执行了要执行的函数,定时器里面不执行。

  

  

原文地址:https://www.cnblogs.com/wjyz/p/10225193.html

时间: 2024-10-22 10:32:48

js的节流和防抖的相关文章

js函数节流和防抖

// 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300); }; // 函数防抖 var

js函数的节流和防抖

js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repaint)这会严重耗费浏览器性能,造成页面 卡顿. 举几个例子:比如说我们在滚动事件中要做一个复杂的计算,或者做一个按钮的防二次点击操作的需求,这些需求都会在频繁的事件 回调中做复杂计算,很有可能导致页面卡顿,这时候我们可以将多次计算合并为一次计算,只在一个精确点做操作.这些事可以利用 函数的防抖来实现

js的抖动及防抖和节流

 js的抖动 在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 . 解决方法 : 防抖 & 节流  js的防抖 就是在 触发事件 中设置一个定时器来延迟 绑定事件 的生效 , 并且每次在 触发事件 中清除定时器 , 直到两次 触发事件 生效的间隔 能够触发定时器才会时 绑定事件 生效 (持续触发并不会对应函数 , 只

节流和防抖的实现

1 防抖 + 定义:合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件 + 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清楚上一次的延时操作定时器,重新定时 + 场景:keydown事件上验证用户名,输入法的联想 + 实现: function debounce(fn, delay) { var timer; return function() { var that = this; var args = arguments; clearTimeout

节流与防抖

节流与防抖 节流和防抖,都是优化高频率执行操作的有效手段. 防抖函数 debounce 功能:连续的事件,只在最后一次触发时执行操作 应用场景:最常见的就是输入框验证,如:用户注册时候的手机号码验证或邮箱验证.只有等用户输入完毕后,才检查格式是否正确:搜索框sug请求 防抖函数的实现 function debounce (fn, wait) { let timer = null; return function() { let args = arguments; let context = th

节流和防抖 区别和实现

节流 实现: /** * 函数节流:开始会执行一次,持续触发事件的话,每隔wait时间执行一次: * 应用场景mousemove, scroll等会连续执行的事件,比较适合应用于动画相关的场景. * @param fn 需要节流的函数 * @param wait 间隔时间 */ export function throttle(fn, wait = 1000) { let lastTime = 0; //上次执行的时间 return function (...args) { let now =

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

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

js函数节流和函数防抖

概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到.因为滚动事件,是一个高频触发的事件. 以下是监听页面元素滚动的示例代码: // 函数节流var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判

Underscore.js 函数节流简单测试

函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js  本省就包含了函数节流的处理函数 _.throttle 和 _.debounce 简单的测试使用如下: 需要使用的类库为jquery  .Underscore 测试的方法为:mousemove 事件 测试页面代码如下: <!DOCTYPE html > <html> <head> <script src="jquery-1.11