別の関数から関数を停止し、別のパラメータでもう一度起動する方法

Question

スライダを作成しようとしていますが、オブジェクトの配列を取得してループさせる関数があります。関数の古いインスタンスがまだ機能している場合、それらは一緒に作業を開始しています。だから私は機能のストッパーを追加するが、それは動作しません。助けてください、ありがとう！

 var keepGoing = true; 

     function slideList(models) { 
        $.each(models, function (index, model) { 
         setTimeout(function() { 
          if (keepGoing != false) { 
         moditem.innerHTML = ""; 
         modlist.value = model.id; 
         var photo = document.createElement('IMG'); 
         photo.src = model.photos[0].file; 
         photo.classList.add('img'); 
         moditem.appendChild(photo); 
         if (index >= models.length - 1) { 
          slideList(models); 
         } 
        } else { 
         return false; 
        } 
        }, 
        5000 * index); 
      }); 
     } 

     function startLoop() { 
      keepGoing = true; 
     } 

     function stopLoop() { 
      keepGoing = false; 
     } 

     $("#car-type-select").on('change', function() { 
      stopLoop(); 
      getModels(this.value); 
     }); 

クリアタイムアウト：あなたが実行を停止するsetTimoutに機能を停止するclearTimeoutを使用する必要が

var timer; 
    function slideList(models) { 
      $.each(models, function (index, model) { 
       timer = setTimeout(function() { 
         moditem.innerHTML = ""; 
         modlist.value = model.id; 
         var photo = document.createElement('IMG'); 
         photo.src = model.photos[0].file; 
         photo.classList.add('img'); 
         moditem.appendChild(photo); 
         if (index >= models.length - 1) { 
          slideList(models); 
         } 
        }, 
        5000 * index); 
      }); 
     } 

     $("#car-type-select").on('change', function() { 
      clearTimeout(timer); 
      getModels(this.value); 
     }); 

その他の重要でない機能

function getModels(cartype_id) { 
      $.ajax({ 
       type: 'POST', 
       url: '/home/models/get', 
       data: { 
        'cartype_id': cartype_id 
       }, 
       success: function (models) { 
        makeList(models); 
        slideList(models) 
       } 
      }); 
     } 

     function makeList(models) { 
      modlist.innerHTML = ""; 
      $.each(models, function (index, model) { 
       var option = document.createElement("option"); 
       option.text = model.manufacturer.name + ' ' + model.name; 
       option.value = model.id; 
       modlist.add(option); 
      }); 
     } 

Answer 1

。

例：コードの更新を見た後

var timer = setTimeout(function(){ /* code here */ }, 3000) 

clearTimeout(timer) //it will stop setTimeout function from executing. 

：

やってみてくださいすることができ：

var timers = []; 

function slideList(models) { 
    $.each(models, function(index, model) { 
    timers.push(setTimeout(function() { 
     moditem.innerHTML = ""; 
     modlist.value = model.id; 
     var photo = document.createElement('IMG'); 
     photo.src = model.photos[0].file; 
     photo.classList.add('img'); 
     moditem.appendChild(photo); 
     if (index >= models.length - 1) { 
      slideList(models); 
     } 
     }, 
     5000 * index)); 
    }); 
} 

$("#car-type-select").on('change', function() { 
    $.each(timers, function(i, timer) { 
    clearTimeout(timer); 
    }) 
    getModels(this.value); 
}); 

のsetTimeoutは、setTimeoutメソッドの配列を必要とするループ内で呼び出さなっているが

を参照