FAQ / Knowledge Points Record (4)

Lazy loading

Lazy loading means loading on demand or delayed loading.
Advantages:

1. No need to write all object instantiations to viewDidLoad to simplify code across domains and enhance code readability
2. The memory usage of the system will be reduced
3. Reduce the burden on the server, increase the page loading speed, reduce bandwidth

Two object class object-oriented

An object refers to a specific target object is a collection of unordered attributes and methods associated
class public abstract class object part
an object class instantiation out by

Create custom class using class

class Start{
	constructor(uname){
		this.uname = uname;
	}
	sayHi(){...}
}
var xx = new Start('ccc')

What are
the two ideas of object
- oriented programming? Process-oriented and object - oriented-process - oriented POP solves the problem according to the analyzed steps -object
- oriented OOP breaks things down into objects and then divides the work and cooperation between the objects

How to realize the difference between three anti-shake and throttling

An anti-shake

Excerpt from https://www.jianshu.com/p/b5fcb9a04b17

Image Stabilization: after the trigger event within the high frequency function n seconds function can only be performed once in n seconds If this matter is triggered again, then it will recalculate the time
achieved by: setting a delay calling the method each time the trigger event and canceled before
Disadvantages of delayed method invocation : if the event is continuously triggered within the specified interval, the method will be continuously delayed

// 防抖
function debounce(fn){
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function(){
    // 每当用户输入的时候把前一个 settimeout clear掉
    clearTimeout(timeout);
    // 然后创建一个新的setTimeout 保证interval间隔内如果事件持续触发 不好执行fn函数
    tiemout = setTimeout(()=>{
      fn.apply(this, arguments);
    },500);
  }
}
// 处理函数
function handle(){
  console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle));

Application scenario:

1. Serch search Lenovo users use anti-shake to save requested resources when continuously inputting values
2. Frequent operation likes and cancels likes need to get the last operation result and send it to the server

Two throttling

Throttle: the high-frequency event triggering but only once the throttle function will be diluted in n seconds to perform frequency
ways: each time the trigger event if there is a delay function currently waiting to be executed between the return

// 节流
function throttle(fn){
  let canRun = true; // 通过闭包保存一个标记
  return function(){
    // 在函数开头判断标记是否为true 不为true就return
    if(!canRun) return;
    // 立即设置为false
    canRun = false;
    // 将外部传入的函数的执行放在setTimeout中
    setTimeout(()=>{ // 当定时器没有执行的时候标记永远是false
      fn.apply(this, arguments);
      canRun = true; // 表示可以执行才一次循环
    },500)
  }
}
function sayHi(e){
  console.log(e.target.innerWidth, e.target.innerheight);
}
window.addEventListener('resize', throttle(sayHi));

Application scenario:

1. Mousedown triggers mousedown (only triggers once per unit time)
2. When the window triggers resize, continuously adjust the browser window size will continuously trigger this event. Use anti-shake to make it only trigger once

Summary:
Function anti-shake: combining multiple operations into one operationThe principle is to maintain a timer that triggers the function after the delay time, but if you start again within the delay time, the previous timer will be canceled and reset. The last operation can be triggered

Function throttling: The principle of making a function triggered within a certain time is to determine whether there is a delay in calling the function and not executing it

Difference: Function throttling no matter how often the event is triggered, it will ensure that a real event processing function will be executed once within the specified time, and function anti-shake only triggers the function once after the last event