How can I create a real lazy loading in Shopify

How can I create a real lazy loading in Shopify - javascript

I have this code and its running. Its basically hiding the elements that are not in view and when they come into view the .lazy class is removed and they become visible. The issue with this method is, that its still loading all the elements at once for example on page load.
How can I change the code that its really only loading the first 6 elements, then the user scrolls down and its loads the next 6 elements and so on. The important thing is, that the list has to stay searchable.
The perfect example would be this page here:
https://de.louisvuitton.com/deu-de/herren/taschen/alle-taschen/_/N-t1uezqf4
This is my code:
<script>
const batchSize = 3;
let observer;
let currentIndex = 0;
const showNextBatch = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const endIndex = currentIndex + batchSize;
for (let i = currentIndex; i < endIndex && i < items.length; i++) {
items[i].classList.remove('lazy');
}
currentIndex = endIndex;
if (currentIndex >= items.length) {
observer.disconnect();
}
}
});
};
const options = {
rootMargin: '50px 0px',
threshold: 0.01
};
if ('IntersectionObserver' in window) {
let collectionList = document.querySelector('.swiper-wrapper');
let items = collectionList.querySelectorAll('.swiper-slide');
for (let i = 0; i < items.length; i++) {
items[i].classList.add('lazy');
}
observer = new IntersectionObserver(showNextBatch, options);
for (let i = 0; i < batchSize; i++) {
items[i].classList.remove('lazy');
}
currentIndex = 0;
for (let i = currentIndex; i < items.length; i++) {
observer.observe(items[i]);
}
}
const mutationObserver = new MutationObserver(() => {
resetObserver();
});
mutationObserver.observe(document.body, {
childList: true,
subtree: true
});
const resetObserver = () => {
observer.disconnect();
collectionList = document.querySelector('.swiper-wrapper');
items = collectionList.querySelectorAll('.swiper-slide');
for (let i = 0; i < items.length; i++) {
items[i].classList.add('lazy');
}
currentIndex = 0;
observer = new IntersectionObserver(showNextBatch, options);
for (let i = 0; i < batchSize; i++) {
items[i].classList.remove('lazy');
}
currentIndex = 0;
for (let i = currentIndex; i < items.length; i++) {
observer.observe(items[i]);
}
};
</script>

Related

Toggling JS button back and forth

my toggle button in javascript seems to work fine in turning on lightmode from default darkmode by running a function that changes the CSS. However, when I flip the button again, it does not change. This is somewhat expected since there's no reason it would change. How would I go about switching it back?
Button HTML:
<label for="ID_HERE" class="toggle-switchy" >
<input checked type="checkbox" id="ID_HERE">
<span class="toggle" onclick="lightmode();"></span>
<span class="switch"></span>
</span>
</label>
JS for button:
function lightmode() {
const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.background = 'white';
}
/*const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.backgroundImage = '';
} */
const paraChanges = document.querySelectorAll('.paragraph');
for (let i = 0; i < paraChanges.length; i++) {
paraChanges[i].style.color = 'black';
}
const topTitleChanges = document.querySelectorAll('.toptitle');
for (let i = 0; i < topTitleChanges.length; i++) {
topTitleChanges[i].style.color = 'black';
}
const alphabetSChanges = document.querySelectorAll('.AlphabetS');
for (let i = 0; i < alphabetSChanges.length; i++) {
alphabetSChanges[i].style.color = 'black';
}
const arowanaContainerChanges = document.querySelectorAll('.arowanacontainer');
for (let i = 0; i < arowanaContainerChanges.length; i++) {
arowanaContainerChanges[i].style.background = 'white';
}
const fishContainerChanges = document.querySelectorAll('.fishcontainer');
for (let i = 0; i < fishContainerChanges.length; i++) {
fishContainerChanges[i].style.background = 'white';
}
const articleContainerChanges = document.querySelectorAll('.articlescontainer');
for (let i = 0; i < articleContainerChanges.length; i++) {
articleContainerChanges[i].style.background = 'white';
}
const sideTextChanges = document.querySelectorAll('.sidetext');
for (let i = 0; i < sideTextChanges.length; i++) {
sideTextChanges[i].style.color = 'black';
}
const topMenuChanges = document.querySelectorAll('.topmenu');
for (let i = 0; i < topMenuChanges.length; i++) {
topMenuChanges[i].style.background = '#fff2f2';
}
const h3Changes = document.querySelectorAll('h3');
for (let i = 0; i < h3Changes.length; i++) {
h3Changes[i].style.background = '#fff2f2';
}
const articlePageChanges = document.querySelectorAll('.articlepage');
for (let i = 0; i < articlePageChanges.length; i++) {
articlePageChanges[i].style.color = 'black';
}
const articleTeaserChanges = document.querySelectorAll('.articleteaser');
for (let i = 0; i < articleTeaserChanges.length; i++) {
articleTeaserChanges[i].style.color = 'black';
}
/*const buttonTextChanges = document.querySelectorAll('.button_text');
for (let i = 0; i < buttonTextChanges.length; i++) {
buttonTextChanges[i].style.color = '#0C0C0C';*/
const box2Changes = document.querySelectorAll('.box2');
for (let i = 0; i < box2Changes.length; i++) {
box2Changes[i].style.color = 'rgb(245, 245, 245)';
}
const box3Changes = document.querySelectorAll('.box3');
for (let i = 0; i < box3Changes.length; i++) {
box3Changes[i].style.color = 'rgb(245, 245, 245)';
}
const projectPhoto1Changes = document.querySelectorAll('.projectphoto1');
for (let i = 0; i < projectPhoto1Changes.length; i++) {
projectPhoto1Changes[i].style.backgroundImage = 'linear-gradient(to bottom, #Fdfcfa 50%, lightgrey 50%)';
}
const section1Changes = document.querySelectorAll('.section1');
for (let i = 0; i < section1Changes.length; i++) {
section1Changes[i].style.backgroundColor = '#fff2f2';
}
const section1textChanges = document.querySelectorAll('.section1text');
for (let i = 0; i < section1textChanges.length; i++) {
section1textChanges[i].style.color = 'black';
}
const section1smalltextChanges = document.querySelectorAll('.section1smalltext');
for (let i = 0; i < section1smalltextChanges.length; i++) {
section1smalltextChanges[i].style.color = 'black';
}
const button_textChanges = document.querySelectorAll('.button_text');
for (let i = 0; i < button_textChanges.length; i++) {
button_textChanges[i].style.color = 'black';
}
const polygonfrontChanges = document.querySelectorAll('.polygonfront');
for (let i = 0; i < polygonfrontChanges.length; i++) {
polygonfrontChanges[i].style.fill = '#fff2f2';
}
const bgChanges = document.querySelectorAll('.bg');
for (let i = 0; i < bgChanges.length; i++) {
bgChanges[i].style.backgroundImage = 'url(".jpg")';
}
const bg2Changes = document.querySelectorAll('.bg2');
for (let i = 0; i < bg2Changes.length; i++) {
bg2Changes[i].style.backgroundImage = 'url(".jpg")';
}
const bg3Changes = document.querySelectorAll('.bg3');
for (let i = 0; i < bg3Changes.length; i++) {
bg3Changes[i].style.backgroundImage = 'url(".jpg")';
}
}

When clicking, you should check the input status to know if the mode should toggle to light or dark mode.
<span class="toggle" onclick="toggle()"></span>
function toggle() {
if(document.getElementById("ID_HERE").checked)
lightmode()
else
darkmode()
}

A* Pathfinding, path not showing up

I have this code, in script (p5.js), I am running it and works as expected, but the moment I include the path code, that helps in finding the previous parents to form a path to the end goal, the browser crushes, as the images show. It fist colors the 3 cells then crashes. Here is the code.
var col = 12, row = 12, grid = new Array(col), openSet = [], closeSet = [], start, end, w, h, path = [];
function removefromArray(array_, element){
for(var i = array_.length - 1; i >= 0; i--){
if(array_[i] == element){
array_.splice(i, 1);
}
}
}
function heuristic(a, b){
var distance = abs(a.i - b.i) + abs(a.j - b.j);
return distance;
}
function Spot(i, j){
this.i = i;
this.j = j;
this.f = 0;
this.g = 0;
this.h = 0;
this.neighbor = [];
this.parent = undefined;
this.wall = false;
this.show = function (color){
fill(color);
if(this.wall){
fill(0);
}
noStroke();
rect(this.i * w, this.j * h, w - 1, h - 1);
}
this.addNeighbor = function(grid){
var i = this.i, j = this.j;
if(i < col - 1){
this.neighbor.push(grid[i+1] [j]);
}
if(i > 0){
this.neighbor.push(grid[i-1] [j]);
}
if(j < row-1){
this.neighbor.push(grid[i] [j+1]);
}
if(j > 0){
this.neighbor.push(grid[i] [j-1]);
}
}
}
function setup(){
createCanvas(500,500);
console.log("A*");
w = width / col;
h = height / row;
for( var i = 0; i< col; i++){
grid[i] = new Array(row);
}
//Adding a spot
for( var i = 0; i< col; i++){
for( var j = 0; j< row; j++){
grid[i][j] = new Spot(i,j);
}
}
//Adding a neighbor
for( var i = 0; i< col; i++){
for( var j = 0; j< row; j++){
grid[i][j].addNeighbor(grid);
}
}
start = grid[0][0];
end = grid[col - 1][row - 1];
openSet.push(start);
}
function draw(){
var winner = 0;
if(openSet.length > 0){
for( var i = 0; i< openSet.length; i++){
if(openSet[i].f < openSet[winner].f){
winner = i;
}
}
var current = openSet[winner];
if(current === end){
noLoop();
console.log("Done!");
}
removefromArray(openSet, current);
closeSet.push(current);
var neighbors = current.neighbor;
for(var i = 0; i < neighbors.length; i++){
var the_neighbor = neighbors[i];
if(!closeSet.includes(the_neighbor)){
var tempG = current.g + 1;
}
if(openSet.includes(the_neighbor)){
if(tempG < the_neighbor.g){
the_neighbor.g = tempG;
}
}
else{
the_neighbor.g = tempG;
openSet.push(the_neighbor);
}
the_neighbor.h = heuristic(the_neighbor, end);
the_neighbor.f = the_neighbor.g + the_neighbor.h;
the_neighbor.parent = current; // the previous node
}
}
else{
// no solution
}
background(0)
for( var i = 0; i< col; i++){
for( var j = 0; j< row; j++){
grid[i][j].show(color(255));
}
}
for( var i = 0; i< openSet.length; i++){
openSet[i].show(color("green"));
}
for( var i = 0; i< closeSet.length; i++){
closeSet[i].show(color("red"));
}
// path = [];
// var temp = current;
// path.push(temp);
// while(temp.parent){
// path.push(temp.parent);
// temp = temp.parent;
// }
// for(var i = 0; i < path.length; i++){
// path[i].show(color(0,0,255));
// }
}
If I try to remove the comments slash for this last part, the system will run for about 5secs then crashes. Someone with the solution, I will highly appreciate.
Result when the path part is uncommented

You are generating a cycle somehow in the chain of parents (i.e. Spot A has parent Spot B and Spot B has parent Spot A), which is causing an infinite loop. I'm not sure exactly where/why this is happening. Your code is a bit hard to read. You should avoid nondescript one letter variable & property names.
Also there are several scoping issues that may be causing unexpected behavior. The keyword var is the worst element of any programming language since goto and it should be scoured from the face of the internet with the fire of 1000 suns. Please use let. See the comments below for more explanation.
var col = 12,
row = 12,
grid = new Array(col),
openSet = [],
closeSet = [],
start, end, w, h, path = [];
function removefromArray(array_, element) {
for (let i = array_.length - 1; i >= 0; i--) {
if (array_[i] == element) {
array_.splice(i, 1);
}
}
}
function heuristic(a, b) {
var distance = abs(a.i - b.i) + abs(a.j - b.j);
return distance;
}
function Spot(i, j) {
this.i = i;
this.j = j;
this.f = 0;
this.g = 0;
this.h = 0;
this.neighbor = [];
this.parent = undefined;
this.wall = false;
this.show = function(color) {
fill(color);
if (this.wall) {
fill(0);
}
noStroke();
rect(this.i * w, this.j * h, w - 1, h - 1);
}
this.addNeighbor = function(grid) {
let i = this.i,
j = this.j;
if (i < col - 1) {
this.neighbor.push(grid[i + 1][j]);
}
if (i > 0) {
this.neighbor.push(grid[i - 1][j]);
}
if (j < row - 1) {
this.neighbor.push(grid[i][j + 1]);
}
if (j > 0) {
this.neighbor.push(grid[i][j - 1]);
}
}
}
function setup() {
createCanvas(500, 500);
console.log("A*");
w = width / col;
h = height / row;
for (let i = 0; i < col; i++) {
grid[i] = new Array(row);
}
//Adding a spot
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j] = new Spot(i, j);
}
}
//Adding a neighbor
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j].addNeighbor(grid);
}
}
start = grid[0][0];
end = grid[col - 1][row - 1];
openSet.push(start);
}
function draw() {
let winner = 0;
let current
if (openSet.length > 0) {
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].f < openSet[winner].f) {
winner = i;
}
}
current = openSet[winner];
if (current === end) {
noLoop();
console.log("Done!");
}
removefromArray(openSet, current);
closeSet.push(current);
var neighbors = current.neighbor;
for (let i = 0; i < neighbors.length; i++) {
var the_neighbor = neighbors[i];
// The use of var here results in very weird behavior
// where tempG's value is preserved from the previous
// iteration of this loop even when it is not assigned
// a value. If that is desired you should declare this
// variable outside of the for loop.
//
// If you always use let isntead of var you will get
// errors instead of bizarre behavior. That will help
// you be deliberate about your variable scoping.
if (!closeSet.includes(the_neighbor)) {
var tempG = current.g + 1;
} else {
print('tempG not set');
}
if (openSet.includes(the_neighbor)) {
if (tempG < the_neighbor.g) {
the_neighbor.g = tempG;
}
} else {
print(`tempG: ${tempG}`);
the_neighbor.g = tempG;
openSet.push(the_neighbor);
print(`openSet: ${openSet.length}`);
}
the_neighbor.h = heuristic(the_neighbor, end);
the_neighbor.f = the_neighbor.g + the_neighbor.h;
the_neighbor.parent = current; // the previous node
}
} else {
// no solution
}
background(0)
for (let i = 0; i < col; i++) {
for (var j = 0; j < row; j++) {
grid[i][j].show(color(255));
}
}
for (let i = 0; i < openSet.length; i++) {
openSet[i].show(color("green"));
}
for (let i = 0; i < closeSet.length; i++) {
closeSet[i].show(color("red"));
}
path = [];
let temp = current;
path.push(temp);
while (temp.parent) {
if (path.includes(temp.parent)) {
print('Cycle detected!');
console.log({ current: { i: temp.i, j: temp.j }, parent: { i: temp.parent.i, j: temp.parent.j } });
break;
}
path.push(temp.parent);
temp = temp.parent;
}
for (let i = 0; i < path.length; i++) {
path[i].show(color(0, 0, 255));
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
Update: Infinite Loop Fix
The part of your code that updates neighbors deviates from the definition of A* pretty substantially. Here's what I came up with (single letter variable names replaces with meaningful names):
let tentativePathScore = current.shortestPathScore + 1;
if (the_neighbor.heuristicScore === undefined) {
the_neighbor.heuristicScore = heuristic(the_neighbor, end);
}
if (the_neighbor.combinedScore === undefined ||
tentativePathScore + the_neighbor.heuristicScore < the_neighbor.combinedScore) {
// Update the path score and combined score for this neighbor.
the_neighbor.shortestPathScore = tentativePathScore;
the_neighbor.combinedScore = the_neighbor.shortestPathScore + the_neighbor.heuristicScore;
the_neighbor.parent = current; // the previous node
if (!openSet.includes(the_neighbor)) {
openSet.push(the_neighbor);
}
}
And here's a working snippet with walls added:
let col = 12,
row = 12,
grid = new Array(col),
openSet = [],
closeSet = [],
start, end, w, h, path = [];
function removefromArray(array_, element) {
for (let i = array_.length - 1; i >= 0; i--) {
if (array_[i] == element) {
array_.splice(i, 1);
}
}
}
function heuristic(a, b) {
if (a.wall) {
return Infinity;
}
return abs(a.i - b.i) + abs(a.j - b.j);
}
function Spot(i, j) {
this.i = i;
this.j = j;
this.combinedScore = undefined;
this.shortestPathScore = undefined;
this.heuristicScore = undefined;
this.neighbor = [];
this.parent = undefined;
this.wall = false;
this.show = function(color) {
fill(color);
if (this.wall) {
fill(0);
}
noStroke();
rect(this.i * w, this.j * h, w - 1, h - 1);
}
this.addNeighbor = function(grid) {
let i = this.i,
j = this.j;
if (i < col - 1) {
this.neighbor.push(grid[i + 1][j]);
}
if (i > 0) {
this.neighbor.push(grid[i - 1][j]);
}
if (j < row - 1) {
this.neighbor.push(grid[i][j + 1]);
}
if (j > 0) {
this.neighbor.push(grid[i][j - 1]);
}
}
}
function setup() {
createCanvas(500, 500);
console.log("A*");
w = width / col;
h = height / row;
for (let i = 0; i < col; i++) {
grid[i] = new Array(row);
}
//Adding a spot
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j] = new Spot(i, j);
}
}
//Adding a neighbor
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j].addNeighbor(grid);
}
}
// make walls
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
if ((i > 1 || j > 1) && (i < col - 2 || j < row - 2) && random() < 0.2) {
grid[i][j].wall = true;
}
}
}
start = grid[0][0];
end = grid[col - 1][row - 1];
start.shortestPathScore = 0;
start.heuristicScore = heuristic(start, end);
start.combinedScore = start.shortestPathScore + start.heuristicScore;
openSet.push(start);
}
function draw() {
let winner = 0;
let current;
if (openSet.length > 0) {
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].combinedScore < openSet[winner].combinedScore) {
winner = i;
}
}
current = openSet[winner];
if (current === end) {
noLoop();
console.log("Done!");
}
removefromArray(openSet, current);
closeSet.push(current);
var neighbors = current.neighbor;
for (let i = 0; i < neighbors.length; i++) {
var the_neighbor = neighbors[i];
let tentativePathScore = current.shortestPathScore + 1;
if (the_neighbor.heuristicScore === undefined) {
the_neighbor.heuristicScore = heuristic(the_neighbor, end);
}
if (the_neighbor.combinedScore === undefined ||
tentativePathScore + the_neighbor.heuristicScore < the_neighbor.combinedScore) {
// Update the path score and combined score for this neighbor.
the_neighbor.shortestPathScore = tentativePathScore;
the_neighbor.combinedScore = the_neighbor.shortestPathScore + the_neighbor.heuristicScore;
the_neighbor.parent = current; // the previous node
if (!openSet.includes(the_neighbor)) {
openSet.push(the_neighbor);
}
}
}
} else {
// no solution
}
background(0)
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j].show(color(255));
}
}
for (let i = 0; i < openSet.length; i++) {
openSet[i].show(color("green"));
}
for (let i = 0; i < closeSet.length; i++) {
closeSet[i].show(color("red"));
}
path = [];
let temp = current;
path.push(temp);
while (temp.parent) {
if (path.includes(temp.parent)) {
print('Cycle detected!');
break;
}
path.push(temp.parent);
temp = temp.parent;
}
for (let i = 0; i < path.length; i++) {
path[i].show(color(0, 0, 255));
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>

window.location.reload(); stuck in infinite loop

I want this function to loop through all items, if it finds the right item to load its page, and if it doesn't find the right item it should reload the page and for loop again. When I delete the window.location.reload(); it loads normally to the item page. This is the code:
var item_name = "Washed";
var item_color = "Red";
function pickItem() {
let items = document.getElementsByClassName("name-link");
for(i = 0; i < items.length; i++) {
if((items[i].innerHTML).includes(item_name)) {
for(j = 0; j < items.length; j++) {
if((items[j].innerHTML).includes(item_color)) {
if(items[i].href == items[j].href) {
window.location.assign(items[i, j].href);
}
}
}
}
}
window.location.reload();
}
In the following form it works as I want, but why does it need the chrome.storage function to work?(I used it with the chrome.storage before, but it was too slow for my purposes so I had to change it.)
var item_name = "Washed";
var item_color = "Red";
function pickItem() {
let items = document.getElementsByClassName("name-link");
chrome.storage.sync.get(["itemName", "color"], function(data) {
for(i = 0; i < items.length; i++) {
if((items[i].innerHTML).includes(item_name)) {
for(j = 0; j < items.length; j++) {
if((items[j].innerHTML).includes(item_color)) {
if(items[i].href == items[j].href) {
window.location.assign(items[i, j].href);
chrome.storage.sync.set({"item_url": items[i, j].href});
}
}
}
}
}
})
window.location.reload()
}

I'd recommend adding a boolean variable which indicates if a location to navigate to has been found yet and wrap the call to window.location.reload() inside an if-block which checks the state of the variable.
e.g.
function pickItem() {
let items = document.getElementsByClassName("name-link");
let found = false;
for (i = 0; i < items.length; i++) {
if ((items[i].innerHTML).includes(item_name)) {
for (j = 0; j < items.length; j++) {
if ((items[j].innerHTML).includes(item_color)) {
if (items[i].href == items[j].href) {
found = true;
window.location.assign(items[i, j].href);
}
}
}
}
}
if (!found) {
window.location.reload();
}
}

A* Algorithm - Javascript: Why does my algorithm not find the shortest path

I am working on visualizing A*. I have a problem where the algorithm finds a path, but it is not the shortest. If I remove the part of the A* function code which is commented as 'tie-breaking', the algorithm finds the shortest path, but it searches the whole grid just like Dijkstra's algorithm, which I don't think A* is supposed to do. These are the pictures of the results with and without tie-breaking:
With Tie-Breaking
Without Tie-Breaking
What is wrong? Here is my A* function:
async a_star_search() {
this.clearSearchNotWalls();
let openSet = [];
let closedSet = [];
let start, end;
let path = [];
this.findNeighbors();
//shapes is a 2d array of squares... a grid
for (let i = 0; i < this.shapes.length; i++) {
for (let j = 0; j < this.shapes[0].length; j++) {
if (this.shapes[i][j].type == "Start") {
start = this.shapes[i][j];
}
if (this.shapes[i][j].type == "End") {
end = this.shapes[i][j];
}
}
}
openSet.push(start);
while (openSet.length > 0) {
let lowestIndex = 0;
//find lowest index
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].F < openSet[lowestIndex].F)
lowestIndex = i;
}
//current node
let current = openSet[lowestIndex];
//if reached the end
if (openSet[lowestIndex] === end) {
path = [];
let temp = current;
path.push(temp);
while (temp.cameFrom) {
path.push(temp.cameFrom);
temp = temp.cameFrom;
}
console.log("Done!");
for (let i = path.length - 1; i >= 0; i--) {
this.ctxGrid.fillStyle = "#ffff00";
this.ctxGrid.fillRect(path[i].x, path[i].y, 14, 14);
await new Promise(resolve =>
setTimeout(() => {
resolve();
}, this.animDelay / 2)
);
}
break;
}
this.removeFromArray(openSet, current);
closedSet.push(current);
let my_neighbors = current.neighbors;
for (let i = 0; i < my_neighbors.length; i++) {
var neighbor = my_neighbors[i];
if (!closedSet.includes(neighbor) && neighbor.type != "Wall") {
let tempG = current.G + 1;
let newPath = false;
if (openSet.includes(neighbor)) {
if (tempG < neighbor.G) {
neighbor.G = tempG;
newPath = true;
}
} else {
neighbor.G = tempG;
newPath = true;
openSet.push(neighbor);
}
if (newPath) {
neighbor.H = this.heuristic(neighbor, end);
neighbor.G = neighbor.F + neighbor.H;
neighbor.cameFrom = current;
}
}
}
//draw
for (let i = 0; i < closedSet.length; i++) { //BLUE
this.ctxGrid.fillStyle = "#4287f5";
this.ctxGrid.fillRect(closedSet[i].x, closedSet[i].y, 14, 14);
}
for (let i = 0; i < openSet.length; i++) { //GREEN
this.ctxGrid.fillStyle = "#00ff00";
this.ctxGrid.fillRect(openSet[i].x, openSet[i].y, 14, 14);
}
await new Promise(resolve =>
setTimeout(() => {
resolve();
}, 10)
);
}
if (openSet.length <= 0) {
//no solution
}
}
Here is my heuristic function:
heuristic(a, b) {
//let d = Math.sqrt(Math.pow(b.I - a.I, 2) + Math.pow(b.J - a.J, 2));
let d = Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
return d;
}

Javascript drag and drop with one elemant

I'm currently learning JavaScript and have created code allowing a user to drag and drop an item. However, this code requires there to be two objects in the list of objects when I want there only to be one. I believe the issue is due to using for loops which start from 0 and require the length of the list of items to be greater than 0. But due to lists starting from a 0 index, this doesn't happen. My code is:
const list_items = document.querySelectorAll('.list-item');
const lists = document.querySelectorAll('.list');
let draggedItem = null;
for (let i = 0; i < list_items.length; i++) {
const item = list_items[i];
item.addEventListener('dragstart', function () {
draggedItem = item;
setTimeout(function () {
item.style.display = 'none';
}, 0)
});
item.addEventListener('dragend', function () {
setTimeout(function () {
draggedItem.style.display = 'block';
draggedItem = null;
}, 0);
})
for (let j = 0; j < lists.length; j ++) {
const list = lists[j];
list.addEventListener('dragover', function (e) {
e.preventDefault();
});
list.addEventListener('dragenter', function (e) {
e.preventDefault();
});
list.addEventListener('drop', function (e) {
console.log('drop');
this.append(draggedItem);
});
}
}

Just an idea, so it might not work: have you tried changing your for loops from
(let j = 0; j < lists.length; j ++)
to
(let j = 0; j <= lists.length; j ++)
<= in JS is less than or equal to

Develop Reference

JavaScript is the programming language of the Web.

How can I create a real lazy loading in Shopify - javascript

Related

Toggling JS button back and forth

A* Pathfinding, path not showing up

window.location.reload(); stuck in infinite loop

A* Algorithm - Javascript: Why does my algorithm not find the shortest path

Javascript drag and drop with one elemant

Categories

Resources