Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize JavaScript Falls flow". In daily operation, I believe many people have doubts about how to realize JavaScript Falls flow. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize JavaScript Falls flow". Next, please follow the editor to study!

The core of waterfall flow

1. Dynamically render and generate the page according to the response volume result of the ajax request

Request address, request method, parameter key names are all defined by the back-end program.

The front end can only define the specific parameter data carried according to the requirements.

The response volume data is the data result returned by the back-end program.

You can only get the data results, not modify the data results.

The page content can be dynamically rendered according to the results of the response volume data.

You can use ternary operators to define attributes for tags, and so on.

2, the judgment basis for the waterfall flow to initiate the request again

Roll up height + window height + reserved height > minimum ul occupancy height

3, throttling of the function

Trigger the same function program many times at the same time

Only need to trigger the call to execute the first function program

Principle:

Define a switch variable

Variable stores raw data

Executive judgment

If the variable stores the original data, the variable assigns other data

If the variable stores other data, the execution of the program after return termination

When all programs of the function trigger the end of execution

The original value of variable assignment can trigger a new function again.

Case

Here, we use a sugar website as a case to call the interface of a sugar website to imitate a simple web page.

Code

Document * {margin: 0; padding: 0;} .btn {width: 300px; margin: 50px auto;} ul, ol, li {list-style: none;} img {display: block; width: 100% Height: 100%;} a, a:hover, a:active {text-decoration: none;} .box {width: 1200px; margin: 0 auto;} .box:: after {display: block; content: "; clear: both } .box ul {width: 260px; float: left; margin: 020px;} .box ul li {width: 100%; display: flex; flex-direction: column; border: 2px solid # 000; margin: 00 15px 0 } .box ul li .imgBox {width: 100%;} .box ul li .contentBox {width: 100%; padding: 15px; display: flex; flex-direction: column; justify-content: space-between;} .box ul li .contentBox p {display: flex Justify-content: flex-start; align-items: center;} .box ul li .contentbox p:nth-child (1) {margin: 10px 0;} .box ul li .contentbox p:nth-child (2) {margin: 10px 0 } .box ul li .contentbox p:nth-child (2) span {margin: 0 10px 00;} .box ul li .contentbox p:nth-child (2) span I {margin: 0 10px 00;} .box ul li .contentbox p:nth-child (3) span:nth-child (1) {display: block Width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin: 0 10px 0 0 } Food recipes, make-up modeling, home life character stars / / define global variables to store related data information let start; let time; let keyword; / / get the parent div tag const oBox = document.querySelector ('.box') / / define global variables to store the data to be used let oUls; let flag = true; / / get all the button buttons const oBtns = document.querySelectorAll ('button') / / Loop iterates to add a click event oBtns.forEach to all button tags (item = > {item.addEventListener ('click', function ()) {/ / the first data shown by default is the first data start = 0 starting from the index subscript 0 / / get the keyword keyword = ul [XSS _ clean]; / / write four ul empty tags oBox [XSS _ clean] = "" to the div tag; / / get all ul tag objects oUls = oBox.querySelectorAll ('ul') / / call the ajax request setPage () that executes async await and promise execution )})}) / / define the page scrolling monitoring event window.addEventListener ('scroll', function () {/ / get placeholder data value / / scroll height on the page let scrollTop = document.documentElement.scrollTop; / / window occupancy height let winHeight = document.documentElement.clientHeight / / set the reserved height let height = 500; / / get the shortest ul tag object / / store the shortest ul tag object let minUl = oUls [0] in the minUl variable at the end of the loop; for (let I = 0 + 1; I o Uls [I] .offsetHeight) {minUl = oUls [I] }} / / execute judgment if (scrollTop + winHeight + height > minUl.offsetHeight) {/ / request dynamic rendering to generate new page content / * because the scroll event is triggered by mouse scrolling multiple times because of the scroll event That is, the mouse scrolling triggers the execution of the setPage () function multiple times, that is, the mouse scrolling triggers the execution of a new ajax request multiple times, because the ajax request is an asynchronous program, and as a result, the ajax request triggered multiple times executes the same request parameters. The obtained response body result is the same response body result. In the actual project, multiple requests only need to execute the first request * / / to determine the data stored in the variable to prevent multiple calls to the function. Number if (flag) {flag = false } else {return;} / / call the function again to initiate a new request for dynamic rendering to generate a new page setPage () }}) / / use async to define the asynchronous request function program async function setPage () {/ / get the time object and timestamp const t = new Date (); time = t.getTime () / / set the parameter data carried by the ajax request according to the requirements when initiating the request / / response is the response volume data const response = JSON.parse (await myPromiseAjax ('/ dt', 'get') `include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=$ {keyword} & start=$ {start} & _ = ${time} `)) Console.log (response); / / assign the index subscript of the starting data to the next request start = response.data.next_start; / / get an array of 24 items of data const arr = response.data.object_list / / iterate through 24 cell arr.forEach in the array (item = > {/ / generate the li tag let str = `based on the data of the array unit

${item.msg}

Like ${item.like_count} favorites ${item.favorite_count}

${item.sender.username}

Publish to ${item.album.name}

`; / / every time a li is generated, it is spliced and written into the shortest ul tag / / get the shortest ul tag let minUl = oUls [0]; for (let I = 0 + 1; I o Uls [I] .offsetHeight) {minUl = oUls [I] }} / / what is stored in the minUl at the end of the loop is the shortest ul tag object / / write the li tag minUl[ XSS _ clean] + = str to the shortest ul tag }) / / when the request execution ends, when the new page content is generated / / you can initiate a new request to assign the original data to the variable flag = true;}

Ajax code

/ / Encapsulation of a promise program to execute the ajax request / / Parameter 1 request url address / / Parameter 2 request / / Parameter 3 carries the parameter function myPromiseAjax (url, type = 'get', data ='') {/ / create a promise object const p = new Promise (function (fulfilled, rejected) {/ / execute asynchronous ajax request const xhr = new XMLHttpRequest () If (type.toLowerCase () = = 'get') {/ / get request method xhr.open (' get', `${url}? ${data}`); xhr.send ();} else {/ / post request method xhr.open ('post', url) Xhr.setRequestHeader ('Content-Type',' application/x-www-form-urlencoded'); xhr.send (data) } / / receive the result of the request xhr.onreadystatechange = function () {/ / determine the ajax status code if (xhr.readyState = 4) if the http status code is 4 (xhr.readyState = 4) {/ / if the http status code is 200299 if (/ ^ 2\ d {2} $) / .test (xhr.status) {/ / successful request fulfilled (xhr.response) } else if (/ ^ (4 | 5)\ d {2} $/ .test (xhr.status)) {/ / request failed rejected (xhr.statusText);}); / / return returns this promise object return p } Note: (1) the server loads the meta tag of the network image

(2) the judgment basis of waterfall flow execution.

(3) throttling of function

(4) running results of server configuration changes

At this point, the study on "how to realize the JavaScript waterfall flow" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.