Image stabilization

  • The user fires events too often, just one last time

Users input content and get associative words. However, if you call the interface every time you type a word, because it is a waste of resources to call the interface frequently, so we use anti-shake in the code to solve this problem, and only after a period of time after the user input, the interface will be called and the corresponding data will appear.



We just need to get itporkThis keyword then calls the interface to get the associative word, but as shown in the GIF above, we constantly call the interface during the input process, which is a waste of resources, to solve this problem, we need to takeImage stabilizationMeasures.

	let t = null
	let inp = document.querySelector('input')
	inp.oninput = function () {
		if( t ! =null ) {
			clearInterval(t)
		}
		t = setTimeout(() = > {
			// Call interface (requirement)
			console.log(this.value)
		}, 500);
	}
Copy the code

We introduce a flag t and use this t to determine if we have finished typing. The anti-shock action of this code is similar to that I determine if there is any more input in the input box within 0.5s. If there is, I clear the previous timer without calling the interface, and then re-produce a timer. If the input is not continued for more than 0.5 seconds, the input is regarded as finished, and the interface can be retrieved.

However, in this case, the anti-shake measures and the call interface required by the business are written together, which is not conducive to maintenance, so we simply encapsulate it.

	let inp = document.querySelector('input')
	inp.oninput = debounce(function () {
                // Call interface (requirement)
		console.log(this.value)
	}, 500)
	function debounce(callback , delay) {
                // The closure saves the tag t
		let t = null
		return function () {
			if( t ! =null) {
				clearInterval(t)
			}
			t = setTimeout(() = > {
                                // Modify this to point, otherwise output undefined
				callback.call(this) }, delay); }}Copy the code

The throttle

  • Controls the number of execution of high-frequency events. Only one task is executed within a specified interval.

When the user is reading the article, we need to listen to which title the user is scrolling to, but listening every time the user scrolls will be too frequent and take up memory. If we add other business code, we will get stuck



Let’s introduce a third variable, just like we did with anti-shockflagTo allow the event to be executed once within a specified time. The following throttling code and the above anti – shake code is actually about the same, here will not do too much explanation, directly see the effect.

	let flag = true;
	window.onscroll = throttle(function () {
		console.log('Call interface')},500)

	function throttle(callback , delay) {
                // The closure saves the flag
		let flag = true
		return function () {
			if (flag) {
				setTimeout(() = > {
					callback.call(this)
					flag = true
				}, delay);
			}
			flag = false}}Copy the code

Application scenarios

Stabilization:

  • Validation of some form elements
  • Part of the search function associative results

Throttling:

  • The user clicks the submit button, assuming we know the approximate return time of the interface, and we use throttling to only allow one click in a certain amount of time
  • Scroll, resize, Touchmove, mousemove and other animation problems that are easy to sustain trigger events can be obtained by throttling at a certain frequency for a certain time

reference

How to fully and excellently answer the interviewer’s questions about anti-shaking and throttling? Up zhu – Report from Xiaozhou