节流(throttle)函数的作用是什么？有哪些应用场景，请实现一个节流函数。

[YvetteLau]

上周五刚复习过防抖，趁热打铁，巩固一下节流~

[lqzo]

函数节流: 指定时间间隔内只会执行一次任务；

以判断页面是否滚动到底部为例，普通的做法就是监听 window 对象的 scroll 事件，然后再函数体中写入判断是否滚动到底部的逻辑：

$(window).on('scroll', function() {
  // 判断是否滚动到底部的逻辑
  let pageHeight = $('body').height(),
    scrollTop = $(window).scrollTop(),
    winHeight = $(window).height(),
    thresold = pageHeight - scrollTop - winHeight;
  if (thresold > -100 && thresold <= 20) {
    console.log('end');
  }
});

这样做的一个缺点就是比较消耗性能，因为当在滚动的时候，浏览器会无时不刻地在计算判断是否滚动到底部的逻辑，而在实际的场景中是不需要这么做的，在实际场景中可能是这样的：在滚动过程中，每隔一段时间在去计算这个判断逻辑。而函数节流所做的工作就是每隔一段时间去执行一次原本需要无时不刻地在执行的函数，所以在滚动事件中引入函数的节流是一个非常好的实践：

// 添加节流函数
function throttle(fn, interval = 300) {
  let canRun = true;
  return function() {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, interval);
  };
}
$(window).on(
  'scroll',
  throttle(function() {
    // 判断是否滚动到底部的逻辑
    let pageHeight = $('body').height(),
      scrollTop = $(window).scrollTop(),
      winHeight = $(window).height(),
      thresold = pageHeight - scrollTop - winHeight;
    if (thresold > -100 && thresold <= 20) {
      console.log('end');
    }
  })
);

加上函数节流之后，当页面再滚动的时候，每隔 300ms 才会去执行一次判断逻辑。
简单来说，函数的节流就是通过闭包保存一个标记（canRun = true），在函数的开头判断这个标记是否为 true，如果为 true 的话就继续执行函数，否则则 return 掉，判断完标记后立即把这个标记设为 false，然后把外部传入的函数的执行包在一个 setTimeout 中，最后在 setTimeout执行完毕后再把标记设置为 true（这里很关键），表示可以执行下一次的循环了。当 setTimeout 还未执行的时候，canRun 这个标记始终为 false，在开头的判断中被 return 掉。

防抖和节流都是为了避免事件的频繁触发，有些事件无论是防抖还是节流都做到性能上的优化，要根据业务需求选择合适的方案。

JavaScript函数节流与函数防抖

今日打卡完毕，首次沙发 嘻嘻嘻

[shenanheng]

函数节流: 指定时间间隔内只会执行一次任务;
场景的运用 => 滚动条滚动到底部
function throttle(fn, interval) {
let flag= true;
return function() {
if (!flag) return;
flag= false;
setTimeout(() => {
fn.apply(this, arguments);
flag= true;
}, interval);
};
}

[AILINGANGEL]

函数节流，是指如果一个事件不停地触发，那么就每隔一定的时间才执行回调函数，回调函数的执行会被稀释。

应用场景：
函数节流典型的应用场景就是图片懒加载，用户下啦页面，需要监听wheel事件，然后判断是否应该展示图片。这个判断就可以用函数节流来做，没必要一直判断。

实现:

• 时间戳方式

function throttle(fn, delay) {
    let pre = 0;
    return function() {
        let now = Date.now();
        if ((now - pre) >= delay) {
            fn.apply(this, arguments);
            pre = now;
        }
    }
}

• 定时器版

function throttle(fn, delay) {
    return function() {
        if (!throttle.timer) {
            fn.apply(this, arguments);
        }
        throttle.timer = setTimeout(function() {
            throttle.timer = true;
        }, delay);
    }
}

[KRISACHAN]

函数节流以及其使用场景

节流： 节流就是流体在管道内流动，突然遇到截面变窄，而使压力下降的现象。节制流入或流出，尤指用节流阀调节。

出处：语出《荀子·富国》：“百姓时和、事业得叙者，货之源也； 等赋府库者，货之流也。故明主必谨养其和，节其流，开其源，而时斟酌焉，潢然使天下必有馀而上不忧不足。”后以“开源节流”指开辟财源，节约开支。

其实作用跟定义就是上面的意思，在日常开发中，我们经常会有频繁调用或执行某一函数的需求，其实按实际用户情况，可能 100ms 甚至 1s 调用一次就OK，所以需要用到函数节流，在一定的时间间隔之后再执行函数。

场景很多，常见的有：

1. 屏幕尺寸变化时页面内容的变动，执行相应逻辑；

2. 监听鼠标滚动时间，执行相应逻辑；

3. 监听重复点击时的时间，执行相应逻辑

下面依然是 lodash 的代码实现：

function isObject(value) {
  const type = typeof value
  return value != null && (type == 'object' || type == 'function')
}

function throttle(func, wait, options) {
  let leading = true
  let trailing = true

  if (typeof func !== 'function') {
    throw new TypeError('Expected a function')
  }
  if (isObject(options)) {
    leading = 'leading' in options ? !!options.leading : leading
    trailing = 'trailing' in options ? !!options.trailing : trailing
  }
  return debounce(func, wait, {
    leading,
    trailing,
    'maxWait': wait,
  })
}

使用方法如下：

var 打印一些东西啦 = function (event) {
	console.log(event);
};

document.querySelector('html').addEventListener('click', throttle(打印一些东西啦, 1000));

[darlingyz]

1、节流(throttle)函数的作用是什么？有哪些应用场景，请实现一个节流函数
节流函数：在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时
作用：避免函数频繁调用
区别在于，当事件持续被触发，如果触发时间间隔短于规定的等待时间（n秒），那么
函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果；
函数节流的情况下，函数将每个 n 秒执行一次
应用场景：
1. window对象的resize、scroll事件
2. 拖拽时的mousemove事件
3. 射击游戏中的mousedown、keydown事件
4. 文字输入、自动完成的keyup事件
实现方式：时间戳或定时器
时间戳
只要触发，就用 Date 获取现在的时间，与上一次的时间比较。
如果时间差大于了规定的等待时间，就可以执行一次；
目标函数执行以后，就更新 previous 值，确保它是“上一次”的时间。
否则就等下一次触发时继续比较

function throttle(func, wait) {
let previous = 0;
return function() {
let now = +new Date();
let context = this;

    if (now - previous >= wait) {
        func.apply(context, arguments);
        previous = now; // 执行后更新 previous 值
    }
}

}
eg:
container.onmousemove = throttle(doSomething, 1000);

定时器
用定时器实现时间间隔。

当定时器不存在，说明可以执行函数，于是定义一个定时器来向任务队列注册目标函数
目标函数执行后设置保存定时器ID变量为空
当定时器已经被定义，说明已经在等待过程中。则等待下次触发事件时再进行查看。
若要防抖，就马上取消它，重新定义计时器以重新计时
function throttle(func, wait) {
let time, context
return function(){
context = this
if(!time){
time = setTimeout(function(){
func.apply(context, arguments)
time = null
}, wait)
}
}

}
效果差异
一个周期内：
时间戳实现的：先执行目标函数，后等待规定的时间段；
计时器实现的：先等待够规定时间，再执行。
即停止触发后，若定时器已经在任务队列里注册了目标函数，它也会执行最后一次。

优化：两者结合
参考
function throttle(func, wait, options) {
let time, context, args, result;
let previous = 0;
if (!options) options = {};

let later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
time = null;
func.apply(context, args);
if (!time) context = args = null;
};

let throttled = function() {
let now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
let remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (time) {
clearTimeout(time);
time = null;
}
previous = now;
func.apply(context, args);
if (!time) context = args = null;
} else if (!time && options.trailing !== false) {
time = setTimeout(later, remaining);
}
};
return throttled;
}
在 函数防抖（debounce）中，实现了一个 cancel 方法。同理：
throttled.cancel = function() {
clearTimeout(time);
time = null;
previous = 0;
}

参考
mqyqingfeng/Blog#26
https://blog.csdn.net/beijiyang999/article/details/79836463
emmmm.....手写函数什么的还是需要多练习，只能参考别人的。。

[luohong123]

本题我重点从节流的作用、概念应用场景、手写节流函数方面回答。

一、节流(throttle)的概念

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，列入水管的水滴在一定的间隔时间滴一滴水。节流是高频触发函数时，但在n秒内也就是约定时间内只会执行一次，节流会稀释函数的执行频率。比如点击发送验证码按钮时，按钮会变成禁用，当到了约定时间比如60秒后按钮才能变成可点击状态，才能再次发送验证码，调用函数。每次触发事件时，如果当前有等待执行的延时函数，则直接return。

二、节流的作用

节流就是在一定时间间隔内触发一次事件。在不影响功能的前提下，减少触发事件的频率，提升性能，减少浏览器或者服务器的压力。

三、应用场景

1、滚动页面

2、商品预览图的放大镜效果时，不必每次鼠标移动都计算位置

3、API的调用

4、按钮点击事件/input事件，防止用户多次重复提交

四、手写节流

• 实现思路
  调用函数时，通过上一次pre和现在now两个变量，记录调用时间的频率，prev-now 如果大于约定的时间，才调用函数。调用函数结束后，把pre设置为现在的时间。

 var throttle = function(func, delay) {
            var prev = Date.now();
            return function() {
                var context = this;
                var args = arguments;
                var now = Date.now();
                if (now - prev >= delay) {
                    func.apply(context, args);
                    prev = Date.now();
                }
            }
        }
        function handle() {
            console.log(Math.random());
        }
        window.addEventListener('scroll', throttle(handle, 1000));

五、参考文章

• 【JS的节流和防抖】

结语
我的回答如有不对的地方，麻烦务必指出来，我及时改正，以免误导别人，让我们共同进步吧！

[Imlona]

节流函数的作用：降低函数的调用频率，间隔一段时间执行，防止某一时间频繁触发，减少不必要的计算，不浪费资源；
应用场景：1、元素拖拽功能实现；2、滚动事件；3、鼠标不断点击，单位时间内只触发一次；

/**

• fn:延时调用函数
• delay:延迟多长时间
• mustRun:至少多长时间触发一次
  */
  function throttle(fn, delay, mustRun){
  var timer = null, prev = null
  return function(){
  var now = +new Date(), context = this, args = arguments;
  if(!prev) prev = now;
  var wait = now - prev;
  if(mustRun && wait >= mustRun){
  fn.apply(context, args);
  prev = now
  }else{
  clearTimeout(timer);
  timer = setTimeout(() => {
  fn.apply(context, args);
  }, delay);
  }
  }
  }

window.onmousedown = throttle(function(){
console.log(+new Date())
}, 2000, 2000)

[kuroism]

看到一个总结挺好的，分享下
防抖和节流的区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

[riluocanyang]

节流函数作用

节流函数和防抖函数一样，都是用于处理高频事件的，优化性能。
节流函数是在规定时间段内只执行一次。

节流函数应用场景

1、鼠标点击事件

节流函数实现

/**
 * 节流函数
 * @param fn 延迟执行函数
 * @param delay 延迟时间
 * @param atleast 规定多长时间触发一次
 */
function throttle(fn, delay, atleast) {
    let timer = null;
    let previous = null;
    return function() {
        let context = this, args = arguments;
        let now = +new Date();
        if (!previous) previous = now;
        if (now - previous < atleast) {
            fn.apply(context, args);
            previous = now;
        } else {
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(context, args)
            }, delay)
        }
    }

}

[zhangxianhui]

节流

节流 就是指定时间间隔内 只执行一次

作用

提升性能 避免必要的资源浪费 提高用户体验

场景

重复点击 分页滚动底部的监听比较常见

实现过程

使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳，
如果大于设置的时间周期，就执行函数，然后把时间戳更新为当前的时间戳，如果小于，就不执行
jieliu(fn, delay) {
let _arg;
let previous = 0;
return function(arg) {
that = this;
_arg = arg;
let now = +new Date();
if (now - previous > delay) {
fn.call(this, _arg);
previous = now;
}
};
}

[woyiweita]

什么是节流
节流用大白话说就是，在一定的时间周期内这件事儿就只做一次。
以昨天“包治百病”为例，说十天为周期给女朋友买包，如果在这个十天的周期内如果多次要包，怎么着也是不能给买的，要求其严格遵守十天这个期限。如果十天期限一过，女朋友要求买包，这个是肯定可以的。
实际应用
在实际的开发中会有这样一个需求，用户输入查询关键词，点击搜索按钮后提交搜索关键词从服务器获取搜索数据，讲搜索结果展示到页面当中。在这个过程中会有一系列的操作，如数据的提交，关键词匹配，数据查询，数据传输等，这些相对都会占据一定的资源，如果用户的网络不稳定，则会增加查询过程中的等待时间。如果用户等不到自己想要的查询结果就会多次点击i提交按钮，这个时候就需要做节流处理，当用户点击搜索按钮的时候判断数据是否在获取过程中，如果是则不进行搜索提交，如果否则提交关键词，进行搜索。
实现节流
实现节流就需要使用时间戳进行控制，具体实现代码如下：（当然这里也可以参照昨天的防抖设置立即执行和延时执行，这里偷懒了。。。[罪过]）

function throttle(fn, ...arg) {
    let run = false;
    return function () {
        if (run) return;
        run = true;
        setTimeout(function () {
            fn.applly(this, arg);
            run = false;
        }, 1000);
    }
}

[ght5935]

背景

事件的触发权很多时候都属于用户，有些情况下会产生问题：

• 向后台发送数据，用户频繁触发，对服务器造成压力
• 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题如果你碰到这些问题，那就需要用到函数节流和防抖了。

函数节流 （throttle）

• 一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
  有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。

应用场景

需要间隔一定时间触发回调来控制函数调用频率：

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

节流函数

function throttle(fn, delay) {
    let pre = 0;
    return function() {
        let now = Date.now();
        if ((now - pre) >= delay) {
            fn.apply(this, arguments);
            pre = now;
        }
    }
}

   function handle() {
            console.log(Math.random());
        }   
        window.addEventListener('scroll', throttle(handle, 1000)); 

[web-data-MrLi]

概念：函数的节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。
场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(movedown)
function scrollFn(){
console.log(1)
}
function throttle(method,delay,duration){
var timer=null;
var begin=new Date();
return function(){
var context=this, args=arguments;
var current=new Date();
clearTimeout(timer);
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}
window.onscroll=throttle(scrollFn,100,500)

[tpxiang]

节流： 指的是高频事件在规定时间内只执行一次，执行一次后，只有大于设定的执行周期后才会执行第二次。
应用场景：
实现dom元素的拖拽功能。
计算鼠标移动的距离。
监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次。
`

var processor = {
timeoutId: null,
//实际进行处理的方法
performProcessing: function(){
//实际执行的代码
},
//初始处理调用的方法
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
}, 100);
}
};
//尝试开始执行
processor.process();
`

[cute1baby]

概念方面先跟前面的防抖区分开。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。
函数节流是指一定时间内js方法只跑一次。大于设定的时间再跑第二次。
同样的改变窗口大小的效果，我们看防抖和节流出现的效果有什么不一样。

//防抖
var windowResize = (function (){
    var a = 0;
    return function(){
        a++;
        console.log(a);
    }
})()
$(window).on("resize", _.debounce(windowResize, 300, {
  'leading': false,
  'trailing': true
}))

效果是我在停止拖动浏览器窗口的时候才会触发windowResize 方法。

// 节流
var windowResize = (function (){
    var a = 0;
    return function(){
        a++;
        console.log(a);
    }
})()
$(window).on("resize", _.throttle(windowResize, 300, {
  'leading': false,
  'trailing': true
}))

节流展示的效果更像一个轮询，每隔300ms就会执行一次。在拉动窗口变化执行函数的性能优化上，防抖优于节流