js防抖和节流

1、防抖

  当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

var i = 0;
var time1 = null;
function click() {
    clearTimeout(time1);
    time1 = setTimeout(function () {
        // 随便点,不到最后一次我执行算我输
        i++;
        console.log("你每点击一次,我就重新开始,直到你最后点击的那一次,我才开始执行方法"+i)
    },2000);
};

2、节流

  在一定时间内只运行一次,若在一定时间内重复触发,只有一次执行。

var bool = true;
var j = 0;
  
function click(bool) { if(bool){ // 随便点,不立即执行算我输 j++; console.log("我会稀释函数的执行次数,无论你点击多少次,我只会在2秒执行一次这个函数"+j) bool = false; setTimeout(()=>{
       // 这里的将在2s后执行 bool
= true },2000) } };

搞定。。。

  

原文地址:https://www.cnblogs.com/wangjishu/p/14699715.html