功能稳定和功能节流是过时的问题。这两种方法都可以优化js的性能。有些人可能会混淆这两个概念。所以我就用自己的理解来解释这两个概念的含义。并列举了这两种方法在小程序中的使用。

功能防抖：英文去抖就是防反弹，大致意思是防止重复触发。

那么，函数防抖的真正意义就是延迟函数执行。也就是说，无论去抖功能触发多长时间，setTimeout只在最后一次触发去抖功能时定义，需要防抖的功能在达到间隔后执行。

有用性：多用于在输入框输入时显示匹配的输入内容。

功能节流：节流在英语中是节流的意思。一般的意思也是为了节省触发的频率

那么，函数节流的真正含义是，函数在每单位时间N秒内次被触发执行，在接下来的N秒内无论被触发多少次都不会被执行。直到下一个单位时间n秒，函数次被触发执行，并且无论函数在这n秒内执行了多少次都不执行。

用法：主要用于页面滚动、调整窗口大小或防止重复点击按钮等。

事实上，仅仅根据控制功能的触发频率很难区分这两个概念。我觉得两个功能都可以达到防止重复触发的功能。但是防抖功能延迟n秒后；函数节流立即执行，然后在n秒后立即执行。

在小程序中，如何使用功能防抖和功能节流：

通常，这两种方法被封装在一个通用的js中：

tool.js

复制代码

/*功能节流*/

功能节流(fn，interval) {

var EntTime=0；//触发时间

var gapTime=interval | | 300//间隔时间，如果间隔没有传输，默认为300毫秒

return function() {

var context=this

var back time=new Date()；//次函数返回是触发时间

if(back time-EntErprise GapTime){

fn.call(上下文，参数)；

enterTime=backTime//将时间分配给个触发器，从而节省第二个触发器的时间

}

};

}

/*防抖功能*/

函数去抖(fn，interval) {

var计时器；

var gapTime=interval | | 1000//间隔时间，如果间隔没有传输，默认为1000毫秒

return function() {

clearTimeout(计时器)；

var context=this

var args=参数；//这里保存参数，因为setTimeout是全局的，防抖功能不需要参数。

timer=setTimeout(function() {

fn.call(context，args)；

}，GapTime)；

};

}

导出默认值{

油门，

去抖

};

复制代码

使用：

复制代码

从导入工具././static/js/tool . js '；

页面({

数据：{

win_scrollTop:0

},

onpagescroll : tool . throttle(function(msg){

this.setData({

win_scrollTop:消息[0]。scrollTop

});

}),

gotounlock : tool . deboake(function(){

this . SaveUserInfo()；

}),

saveUserInfo:function(){

console.log(111)

}

})

复制代码

以上两种方法只是简化版，可能有些情况没有考虑到，以后会重新优化。

功能节流的描述：

(1)次执行时，一定会执行该功能。

(2)N秒内第二次触发时，当次和第二次的间隔时间小于设定的间隔时间时，不执行。之后，第三个和第四个触发器仍然不执行。

(3)n秒后只有一次，是次再次触发功能。

防抖功能描述：

(1)当功能次被触发时，定时器被定义。n秒后执行。

(2)第二次触发功能时，由于关闭的特性，此时的定时器已经是次触发时定时器的标识。然后直接清除个setTimeout，那么个setTimeout的内容就不执行了。然后定义第二个setTimeout。

(3)然后重复第二步，始终清除，始终设置。在最后一次触发该功能之前，最后一个计时器以n秒为间隔进行定义和执行。

(4)如果在最后一个计时器未执行时功能再次触发，重复第三步。相当于设定的间隔时间，它只是延迟了函数的执行时间，而不是再执行多少秒。

在这一点上，两种方法的区别是显而易见的。功能节流是为了降低功能的触发频率，功能防抖是为了延迟功能的执行，无论触发多少次，都只会执行最后一次。