Anti – shake, throttling, lazy loading, Url parameter conversion to Json

Image stabilization

Anti-shake idea: if it is not triggered for the second time within the specified time, it will be executed

function debounce(fn, delay) {
  let timer = null;
  // Use closures to save timers
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() = > {
      fn.apply(this.arguments);
      // fn();
    }, delay);
  };
}
function fn () {
  console.log('if you -')
}
addEventListener('scroll', debounce2(fn, 1000))
Copy the code

The throttle

Trigger a high-frequency event that is executed only once in N seconds.

function throttle(fn, delay) {
  let lastTime = 0;
  return function () {
    let nowTime = new Date(a);if (nowTime - lastTime > delay) {
      fn.apply(this.arguments); lastTime = nowTime; }}; }function fn() {
  console.log("If you -".new Date());
}
addEventListener("scroll", throttle(fn, 3000));
Copy the code
// Basic version 1: timestamp (the first trigger will execute, but not rule out not executing, please think about it)
function throttle(fn, delay) {
  var prev = Date.now()
  return function(. args) {
    var dist = Date.now() - prev
    if (dist >= delay) {
      fn.apply(this, args)
      prev = Date.now()
    }
  }
}

// Base version 2: Timer (last run also)
function throttle(fn, delay) {
  var timer = null
  return function(. args) {
    var that = this
    if(! timer) { timer =setTimeout(function() {
        fn.apply(this, args)
        timer = null
      }, delay)
    }
  }
}

// Advanced version: start execution, end execution
function throttle(fn, delay) {
  var timer = null
  var prev = Date.now()
  return function(. args) {
    var that = this
    var remaining = delay - (Date.now() - prev)  // The remaining time
    if (remaining <= 0) {  // First trigger
      fn.apply(that, args)
      prev = Date.now()
    } else { // Triggered after the first time
      timer && clearTimeout(timer)
      timer = setTimeout(function() {
        fn.apply(that, args)
      }, remaining)
    }
  }
}

function fn () {
  console.log('the throttling')
}
addEventListener('scroll', throttle(fn, 1000))

Copy the code

Lazy loading

  • Place an IMG tag on the page
  • Add Alt, width, height, and data-src to the IMG image
  • Js is used to determine whether the page scrolls to the location where an image needs to be displayed. In this case, SRC is set to data-src
<ul> <li><img src="./imgs/default.png" data="./imgs/1.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/2.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/3.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/4.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/5.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/6.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/7.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/8.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/9.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/10.png" Alt = "" > < / li > < / ul > let imgs = document. QuerySelectorAll (' img) / / visual area highly let clientHeight = window. The innerHeight | | Document. The documentElement. ClientHeight | | document. Body. ClientHeight function the lazyLoad () {/ / rolling roll to the height of the scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop for (let i = 0; i < imgs.length; Let x = clientHeight + scrolltop-imgs [I].offsetTop if (x > 0 && x < clientHeight+imgs[i].height) { imgs[i].src = imgs[i].getAttribute('data') } } } // addEventListener('scroll', lazyLoad) or setInterval(lazyLoad, 1000)Copy the code

Different from ordinary lazy image loading, the following one does two more careful processing:

  • Remove event monitoring after all images are loaded;
  • The loaded image is removed from imgList.
let imgList = [...document.querySelectorAll('img')]
let length = imgList.length
// Fix errors that require self-execution
  const imgLazyLoad = (function() {
   let count = 0
   return function() {
        let deleteIndexList = []
        imgList.forEach((img, index) = > {
            let rect = img.getBoundingClientRect()
            if (rect.top < window.innerHeight) {
                img.src = img.dataset.src
                deleteIndexList.push(index)
                count++
                if (count === length) {
                    document.removeEventListener('scroll', imgLazyLoad)
                }
            }
        })
        imgList = imgList.filter((img, index) = >! deleteIndexList.includes(index)) } })()// It is better to add anti-shake treatment here
document.addEventListener('scroll', imgLazyLoad)
Copy the code

Implement URL parameter to JSON

var getQueryJson = function (url) {
  let arr = [];
  let res = {};
  let jsonstr = url.split("?") [1].split("#") [0]; / / select? And #
  arr = jsonstr.split("&"); // Get the parameters in the browser address bar
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].indexOf("=") != -1) {
      let str = arr[i].split("=");
      res[str[0]] = str[1];
    } else {
      res[arr[i]] = ""; }}return res;
};

var getQueryJson2 = function (url) {
  let param = {}; // Store the final JSON result object
  url.replace(/([^?&=]+)=([^?&=]*)/g.function (s, v, k) {
    param[v] = decodeURIComponent(k); // Parse characters in Chinese
    return k + "=" + v;
  });
  return param;
};
console.log(
  getQueryJson(
    "Http://127.0.0.1:8080/html/urltojson.html? id=1&name=good&price=#hash"));Copy the code